Vue2官网使用及简介

官网地址

中文官网地址：https://cn.vuejs.org/ 英文官网地址：https://vuejs.org/

文档使用

Vue定义

一套用户构建用户界面的渐进式JavaScript框架。

了解Vue基础知识

想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象；
root容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法；
root容器里的代码被称为【Vue模板】
容器与实例一一对应
真实开发中只有一个Vue实例，并且会配合着组件一起使用
{{ xxx}}插值中的xxx可以自动读取到data中的所有属性；
一旦data中的数据发生变化，那么模板中用到该数据的地方也会自动更新（数据劫持）

注意区分：js表达式和 js代码（语句）
(1)表达式：一个表达式会产生一个值，可以放在任何一个需要值的地方； a a+b demo(1) x===y?‘a’:‘b’
(2)js代码（语句） if(){} for(){}

<!-- 容器 -->
<div id="root"><!-- 插值语法 --><h1>Hello,{{name}}</h1>
</div><script>Vue.config.productionTip = false    // 创建Vue事例new Vue({el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串// el:document.getElementById('root'),data:{//data用户存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象name:'张三'}})</script>

Vue模板语法有2大类：

(1)插值语法：功能：用于解析标签体内容。写法：{{xxxx}},xxx是表达式，且可以直接读取到data中所有属性。
(2)指令语法：功能：用于解析标签（包括：标签属性、标签内容、绑定事件…）
举例：v-bind:href=‘xxxx’
或简写为:href=‘xxxx’,xxxx要写js表达式且可以直接读取到data中所有属性。
html <a v-bind="url" :x="hello">这是一个超链接</a>
举例：
(1)v-on:click=‘xxxx’ 或简写为@click=‘xxxx’ ，其中xxx是事件名
(2)事件的回调需要配置在methods对象中，最终会在vm上；
(3)methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件事例对象；
(4)@click=“demo” 和 @click="demo($event)"效果一致，但后者可以传参
  <div id="root"><button v-on:click="showInfo1">点我提示信息</button><button v-on:click="showInfo2($event,66)">点我提示信息</button></div><script>const vm = new Vue({el:"#root",data(){return {name:"哈哈"}},methods: {/* 方法不做数据代理 */showInfo1(event){console.log(event.target.innerHTML);},showInfo2(event,param){console.log(param,event);}},})</script>

Vue数据绑定有2种：

(1)单向绑定(v-bind):数据只能从data流向页面。
(2)双向绑定(v-model):数据不仅能从data流向页面，还可以从页面流向data。备注：
1.双向绑定一般都应用在表单类元素上（如：input、select等）
2.v-model:value 可以简写为v-model,因为v-model默认收集的就是value值
xml <input v-model="name">

data与el的写法有2种：
el有2种写法
(1)new Vue时候配置el属性
(2)先创建Vue实例，随后再通过vm.$mount(’#root’)指定el的值
data有2种写法
(1)对象式
(2)函数式
一个重要的原则
由Vue管理的函数，一定不要写箭头函数，一旦写了箭头函数，this就不再是Vue实例了

Vue特点

采用组件化模式，提高代码复用率，且让代码更好维护。
声明式编码，让编码人员无需直接操作DOM,提高开发效率。
使用虚拟DOM+优秀的Diff算法，尽量复用DOM节点

搭建开发环境

直接引入CDN路径或下载到本地资源进行引入（本地资源参考下载中的内容）

A.引入开发版本,控制台提示解决方法：
1.安装开发调试工具，资源在下载中
2.Vue.config.productionTip = false（阻止 vue 在启动时生成生产提示）
B.引入生产版本:
NPM引用,搭配命令行工具

了解MVVM模型

M：模型（Model）:data中的数据
V：视图（View）:模板代码
VM:视图模型(ViewModel):Vue实例

观察发现：
data中所有的属性，最后都出现再了vm身上。
vm身上所有的属性及 Vue原型上所有属性，在Vue模板上都可以直接使用

了解defineProperty用法

Object.defineProperty用法

 var obj = {a:1,b:2, c:3}
/*Object.defineProperty(obj,'d',{value:4,enumerable:true,//控制属性是否可以枚举,默认为falsewritable:true,//控制属性是否可以被修改,默认为falseconfigurable:true//控制属性是否可以被删除,默认为false})console.log(Object.keys(obj))*/
var num = 10
Object.defineProperty(obj,'e',{get:function(){console.log("读取了");return num},set:function(value){num = valueconsole.log("有人修改了");}
})

了解数据代理

定义：通过一个对象代理对另一个对象中属性的操作（读/写）

let obj= {x:100}
let obj2={y:200}
Object.defineProperty(obj2,'x',{get:function(){return obj.x},set:function(val){obj.x = val}
})

了解Vue中数据代理

总结：

Vue中的数据代理：
通过vm对象来代理data对象中属性的操作（读/写）
Vue中数据代理的好处：
更加方便的操作data中的数据
基本原理：
通过Object.defineProperty()把data对象中所有属性添加到vm上。
为每一个添加到vm上的属性，都指定一个getter/setter
在getter/setter内部去操作（读/写）data中对应的属性

了解监视数据的原理

vue会监视data中所有层次的数据。
如何检测对象中的数据？
通过setter实现监视，且要在new Vue时就传入要检测的数据。
（1）对象中后追加的属性，vue默认不做相应式处理
（2）如需给后添加的属性做响应式，请使用如下API:
Vue.set(target,propertyName/index,value)或
vm.$set(target,propertyName/index,value)
如果检测数组中的数据？
通过包裹数组更新元素的方法实现，本质就是做了两件事：
（1）调用原生对应的方法对数组进行更新。
（2）重新解析模板，进而更新页面。
在Vue修改数组中的某个元素一定要用如下方法：
（1）使用这些API:push()、pop()、shift()、unshift()、splice()、sort()、reverse()
（2）Vue.set() 或 vm.$set()

特别注意：Vue.set()和vm.$set()不能给vm或vm的根对象添加属性！！！！

Vue2官网使用及简介相关推荐

如何访问原来Vue2官网?
Vue官网已经默认升级为Vue3了: https://vuejs.org/ 需要访问原来Vue2官网的小伙伴可以添加一下三级域名v2来去访问: https://v2.vuejs.org/
Vue3官网使用及简介
Vue3带来了什么性能的提升打包大小减少41% 初次渲染快55%,更新渲染快133% 内存减少54% - 源码的升级使用Proxy代替defineProperty实现响应式重写虚拟DOM的实现 ...
有意思的一些免费API接口整理，包含官网地址以及简介
1.文档上的小牌子官网:https://shields.io/ 举例:获取vue 在npm上的版本号 https://img.shields.io/npm/v/vue.svg?sanitize=tr ...
php怎么写官网,PHP - Manual: 简介 (官方文档)
简介 pthreads 是一组允许用户在 PHP 中使用多线程技术的面向对象的 API. 它提供了创建多线程应用所需的全套工具. 通过使用 Thread, Worker 以及 Threaded 对象, ...
商洛学院数学与计算机应用官网,应用数学系简介
商洛学院应用数学系始建于1976年,时称"商洛师范专科学校数学系",2006年学院升本后更名为"商洛学院数学系",2008年11月更名为"商洛学院数学 ...
摘抄vue2官网的长句,跟着尤玉溪学英文
记录一下第一眼看着别扭的句子 At the core of Vue.js is a system that enables us to declaratively render data to the ...
软件官网与memcached介绍
常见官网 http://www.keepalived.org http://nginx.org/ documentation 模块说明 http://www.apache.org/ https://o ...
王者荣耀官网制作心得
一开始看到官网复杂的页面还是有些心虚的,从网上学了一些关于网页的制作,也是有一些心得的. 开启新的文件夹,一个html一个css,链接进去就OK,现在想想在大公司里开发网页是否也是如此,一个大项目分为 ...
鸿蒙软件应用商店,鸿蒙应用商店游戏官网下载_鸿蒙应用商店手游官网下载_18183手机游戏下载...
超好玩手游鸿蒙应用商店官网下载强势来袭,带给你前所未有的游戏体验. 鸿蒙应用商店官网下载应用简介: 鸿蒙应用商店官网下载游戏玩法有趣,新手玩家也可以很快上手,简洁的界面一目了然. 视觉设计全面焕新,体 ...