一、Vue的基本概念！
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。
Vue 的核心库只关注视图层。
二、安装！
开发版本：https://vuejs.org/js/vue.js
【打开链接后Ctrl+S直接保存在本地，在HTML中的script标签上src引入即可使用】
生产版本：https://vuejs.org/js/vue.min.js
【此版本为压缩版】
三、启动Vue!
new Vue({
el: '#Box'【element css字符串选择 获取的DOM元素，作用是把HTML哪一个范围作为模板】
data:{ 【数据对象，未来在模板中可以通过key值直接使用】
content:data
}
methods:{ 【定义在模板中方法或事件函数--写在这里--data中methods中的属性都会挂载实例上】
toggleShow(){
console.log(this); 【 指向所在的实例，this-指向根实例】
}
}
})
四、指令！
文本插值：
{{表达式}} mustache语法
指令的作用：
是把数据和DOM结构结合在一起，数据改变时候，DOM会自动更新。
不同的指令有不同的作用
指令以v-开头，vue会解析不同的作用，写的位置是在行间
常用的指令：
v-bind ：在行间动态的绑定数据
语法：v-bind:行间自动以属性名='表达式'【v-bind简写 :】
v-for：用来根据数据循环数据个DOM元素，放在需要重复生成到的标签上
【循环数组 => 每一项 => 每一项对应的下标】
语法：v-for="item in 数组"
v-for="item,index in 数组"
v-for="a,b in 数组"
v-for="value,key in 对象"
item变量名随便写，用来接收循环数据的每一项
v-if：控制一个元素渲染还是不渲染
语法：v-if="表达式"
【表达式的值为true，渲染元素，为false，不渲染】
v-if
v-else
v-if
v-else-if
v-else-if
v-else
【表达的值频繁的切换true或false，会频繁的把DOM元素从界面中移除和加入，消耗性能】
v-show：控制一个元素是否隐藏，不控制显示
【display:none】
【注：频繁的切换元素显示隐藏，建议使用v-show，只切换样式而不是移除dom；
在页面初始加载时候，根据数据的有没有来决定是否需要渲染某个结构，建议使用v-if】
v-on：绑定事件，作用在需要绑定事件的元素上
语法：v-on:事件名="事件执行的函数"【v-on简写 @】
v-on:事件名="事件执行的函数()"【v-on简写 @】
点击的时候可以传入参数
拿事件对象，在模板中使用$event传个函数
事件名：click mouseover mouseout .....
五、响应式的数据绑定！
当数据发生变化，视图自动更新【数据就是状态，状态呈现在视图中】
命令式 ：每一步如何实现，怎么实现，都需要写出来
声明式 ：不需要关系具体的实现，只需要告诉它要做什么事情
虚拟DOM：
声明式渲染：不保留给开发的具体的渲染细节，我们只需要把数据写在指定的位置就可以，Vue内部会帮助去绑定和渲染
网友评论