Vue基础教程，使用方法

一.引入vue.js

二.创建一个vue实例

在实例化vue的时候，有两种挂载方式

1.最常用的做法就是直接在实例化的时候利用el:"#app"来挂载元素

el：设置被操作的元素，表示vue要控制的区域，值为css选择器

data：

类型是对象

作用存放要用到的数据，数据为响应式的

三.将数据绑定到页面元素

   {{lcy}}

{{}} 意思是Mustach语法，vue中用{{}}来定义模板和数据的关联，可以是property键值，也可以是js表达式比如：{{msg?"完成":"未完成"}}

四.指令

注：使用v- 属性绑定数据是不需要双花括号包裹

1.什么是指令？

具有特殊含义，拥有特殊功能的特性
指令带有v-前缀，表示它们是Vue提供的特殊特性
指令可以直接用data中的数据

2.基础指令

v-pre : 直接显示原始标签，不获取data中的值
v-once：只渲染一次，元素及其子节点视为静态并跳过
v-text：等同与{{msg}}，优先级高于Mustache（v-text替换元素的所有内容，{{}}只替换自己）
v-html：更新元素的innerHTML（内容按普通html插入，不会作为vue模板编译）

3.条件渲染指令

v-if：条件性渲染一块内容
v-else if
v-else
v-show：根据表达式真假值，切换元素的display CSS属性

4.列表渲染指令

v-for：列表渲染

5.v-bind指令

动态的绑定一个或多个特性，全动态，可以随data里数据改变而改变
可以去除v-bind 直接写 :***, :后为传递的参数

例子：

点击切换属性：

点击更改属性：

也可以直接绑定一个样式对象：

修饰符：

.指名的后缀，用来指出一个指令应该以特殊方式绑定

.camel：用于绑定特性时，会将大写字母转化为小写字母

.prop：用于绑定DOM属性

.sync

6.v-on指令

v-on指令可以监听DOM事件，并在触发时运行一些javaScript代码

该指令用于监听某个元素的点击事件，执行的方法通常是在methods中定义

简写为： @click=" "

事件的类型由参数决定

可以接受一个需要调用的方法

事件修饰符：

.stop：阻止事件冒泡
.prevent：阻止默认事件
.once：执行一次
.self：绑定的元素本身触发时才触发回调（也能阻止事件冒泡）
.capture：事件捕捉模式

按键修饰符：

.enter（回车键）
.tab
.delete（删除或退格）
.esc
.space（空格键）
.up（上建）
.down（下键）
.left（左键）
.right（右键）

例子：

$event 固定写法

$event.target 事件对应的html节点

7.列表渲染

v-for：

利用v-for指令，基于数据多次渲染元素

下面分别展示v-for循环数组和对象

v-for="(item,index) in array"
// array 为依赖的数据，item为数组的项，index为数组的下标索引v-for="(value,key,index) in object"
// object为js依赖的对象，value为值，key为键，index为索引

渲染数字：

用法：n in num 参数： n：数字，从1开始

渲染字符串：

用法：str in string 参数：str：字符串，原数据字符串中的每一个

另外：

可以利用template元素循环渲染一段包含多个元素的内容

key：管理可复用的元素，辅助vue更好的识别根节点更好的优化渲染，建议key使用后台数据的唯一id值

8.表单绑定

v-model：

使用v-model指令在表单上，元素上创建双向数据绑定，会根据控件类型自动选取正确的方法

v-model 相当于做了两个操作：v-bind绑定一个value属性，v-on指令给当前元素绑定input事件

可以在表单元素上创建双向绑定。即数据更新，元素更新，元素更新，数据也更新

注：

v-model会忽略所有的表单元素的value，checked，selected的初始值，而是将vue实列的数据作为数据来源。

v-model表达式的初始值未能匹配任何选项，元素将渲染成为选择状态

例：

1.双向绑定：表单的输入值可以返回给实列数据

2.绑定多个复选框：

绑定到一个数组，数组中的值为被选中的value值

3.绑定单选框：

被绑定的数据和value同步

4.绑定下拉列表

它会依据实列数据对表单进行匹配

5.修饰符：

.lazy：添加lazy修饰符，在变成change事件后进行同步

.number：自动将用户的输入值变为数值类型

.trim：自动过滤用户输入的首位空白字符

9.自定义指令

1.全局自定义指令

//自定义全局的指令
Vue.directive('focus', {//第一个参数永远是el，表示原生的js对象bind: function (el) { //当指令绑定到元素上的时候，会立即执行bind函数，只执行一次，此时元素还没有插入到DOM中,focus聚焦此时不会生效el.focus()},inserted: function (el) { //当元素插入到DOM中的时候，会执行inserted函数，只执行一次el.focus()},updated: function () { //当VNode的时候，会执行updated函数，可能出发多次}});// 使用全局自定义指令
<input type="text" class="form-control" v-model="keywords" v-focus">

2.私有自定义指令

作为和methods平级的属性定义在VM的实例中

directives: {'fontweight': {bind: function (el, bingding) {el.style.fontWeight = bingding.value;}},'fontsize': function (el, bingding) { //这个function等同于把代码写到了bind和update中去el.style.fontSize = parseInt(bingding.value) + 'px';}
}// 在dom中使用<div id="app2" v-color="'pink'" v-fontweight="200" v-fontsize="20"><p>{{date | dateFormat}}</p></div>

五.计算

computed：从现有的数据计算出新的数据

计算属性的值和data一样，可以直接使用，返回的值就是计算属性的值

计算和方法的区别：

1.使用方法的话，每次页面重新渲染都会执行一次，计算属性不会，计算出来的数据是只读，不能修改

2.计算属性是基于响应式依赖进行缓存的，计算属性的值一直存于缓存中，只要data数据不改变，每次访问计算属性，都会立刻返回缓存的结果，而不是在执行一次

3.方法是每次触发重新渲染，调用方法就会执行函数

例：

六.监听

watch：监听如果数据发生变化就执行回调

监听的值类型：

函数类型：监听函数，会接收两个参数，第一个参数为newVal(被改变的值)，第二个参数为oldVal(赋新值之前的值）
字符串类型：值为方法名字，被监听的数据改变，会执行方法

对象类型：
handler：必须有，handle是被监听的数据改变时执行的回调函数，handler的值类型为函数/字符串类型
deep：使用deep选项，可以发现对象内部的变化，将deep设置为true开启深度监听

七.模板

一个字符串模板作为Vue实例的标识使用，会替换挂载的元素，挂在元素的内容会被忽略