垂直+网站开发/西安seo教程
步骤：准备一个被vue挂载的容器div
new vue实例对象
1.Vue 实例的作用范围？
vue会管理el命中的元素及其后代内部的后代元素，注意是内部的
可以看出vue 作用范围仅限于el 命中的元素的内部
2.是否可以选择其他选择器？
可以，但是建议选择id选择器
默认选择的是id选择器。那是否可以是其他的选择器呢？
可以看得出不管是id选择器还是class选择器或者是标签选择器都是没有发生变化的，所以它可以对其他的选择器进行渲染。
注：只能支持双标签(p、div、h1-h6)，单标签是无法支持的。因为单标签的内部是无法写插值表达式的。那是不是所有的双标签都支持呢？ 不是的。例如我们的body标签 它是双标签吧。
3.是否可以选择其他DOM元素？
我们可以设置其他的双标签，但是不能使用Html和body
4.data数据对象
data 数据对象 有很多 例如数组、对象、方法等比较复杂的类型数据等
1.vue中用到的数据定义在data中
2.data中可以写复杂类型的数据
3.渲染复杂的数据类型时，遵守js的语法即可(比如获取对象的值通过对象名.属性名、获取数组值可以通过下标索引的值。)
5.Vue 指令
1.内容绑定 事件绑定：v-text、v-html、v-on
2.显示切换 属性绑定：v-show、v-if、v-bind
3.列表循环 表单元素绑定：v-for、v-on补充、v-model
首先：v-text：设置标签的文本值内容(textContent)
但是默认的写法会替换全部的内容，使用差值表达式{{}}可以替换指定的内容
如果我们要进行部分的替换 利用插值表达式可以用作替换部分标签的值
2.v-html
这里我们去比较一下v-text和v-html的区别
v-html属性是设置元素的innerhtml，内容中有html结构的会被解析为标签而v-text指令无论内容是什么，他只解析成文本值
可以看得出来v-html数据生成后，在浏览器解析中生成了对应的html标签，而v-text 就把这个message属性的值全都显示了出来。
3.v-on 也可简写为@
v-on 为元素绑定事件，的方法我们定义在methods属性中。
方法的内部通过 this 关键字可以访问定义在data中的数据
语法：v-on:事件="事件名"
vue 在页面中 我们无需操作dom来改变页面元素 而是直接通过数据来改变 这也是vue的一大特点。数据改变 页面也会随之进行改变。
总结：
4.v-show 根据表达式的真假 切换元素的显示(true)和隐藏(false)
原理是修改元素的display，实现元素的显示与隐藏
5.v-if(操作dom元素)
和v-show 类似 但是和v-show不同的则是在操作元素上的改变
v-show 操作的是样式 也就是通过display来做显示和隐藏
v-if 则是直接操作dom元素
那么 在实际开发中我们应该使用哪个呢？
v-if是操作dom元素 那么在实际开发中操作dom元素节点对性能较差，在这里推荐使用v-show。
总结：
6.v-bind 设置元素的属性(比如：src、title、class等)可简写为 ： 冒号
语法：v-bind:属性名=表达式
设置class 属性 可以通过三元表达式设置 但是代码会显得比较繁琐，所以在这里我们更加建议使用方法。通过设置的class：表达式 判断是否为true 或者 false.
7.v-for 根据数据生成列表结构
语法 (item,index) in 数据
item 代表每一项，index代表索引，in 表示关键字，数据则是对应data中的数据
v-for 指令的作用 是把作为母版的那个表标签还有它内部的所有内容根据数据的个数拷贝若干份。
v-for有一个特点：如果数组的长度改变了，比如添加了或者移除了一个元素，那生成的列表也会同步改变，是响应式的
数组经常和v-for一起使用
8.v-on补充
传递自定义参数 事件修饰符
有几个参数就写几个
9.v-model 获取和设置表单元素的值(双向绑定) 注意是表单元素
它的作用就是便捷的设置或获取表单元素的值
什么
叫双向绑定呢？
一解析以后data数据中的值 会同步到对应绑定的表单元素，然后呢。当我们更改表单元素的值的时候它也会将我们本次的更新同步到data对应的数据里面。一来一回不就是两个方向吗。所以呢，所谓双向绑定就是 不管你更新哪一方的值，都会同步更新对方的值。
总结：