推荐 VUE 官方中文 教学视频
只提供了 部分 教学视频 ，不过这足够入门
如果存在大量填充数据的则用vue 统一在H5 写好数据填充格式，然后在js 里面写(目前只用这一个功能，因为其他功能还不太会用，哈哈哈)
var abc = new Vue({
el : "CSS选择器"， // 这个元素内任意位置可以直接使用 data 里面的变量
data : {
key : value,
...
}，
method : {
funname : function() {}， // 元素内任意位置可以使用 @ funname() 调用函数
},
})
加上vue 丰富的 v - * 标签，可以很灵活的填充数据啦，另外 可以用 abc.xx 直接改变数据，然后页面上面的变量会自动渲染，是不是比 jquery的 var xx = xx ,... 然后选择元素，改变属性简洁多了
下面介绍一下 vue 的 条件渲染吧
举个例子 v-for 局部引入的变量需要 用 {{}} （vue 默认 分隔符）使用，
<li style = "list-style:none;" v-for="i in item.result.split('\n')">[[i]]</li>
条件 v-if v-else-if v-else
特点必须连用，在两个相邻元素，否则无效
如果只想单独用条件功能，可以直接用 <template> 元素当做不可见的包裹元素 最终的渲染结果将不包含 <template> 元素
因为 v-if 是一个指令，所以必须将它添加到一个元素上
<template v-if="ok"> <!-- if 里面可以写 vue 里面的data 变量 ，总之是个 布尔类型的表达式 -->
<h1>Title</h1>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
</template>
< template v-else> else < !--就不用加条件了，直接写就可以了 -->
</template>
v-show
<h1 v-show="ok">Hello!</h1>
v-show 是控制元素的显示和隐藏用的，和if 有点像，不过，他是想到那个鱼直接渲染，然后元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-for
v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
在 v-for 块中，我们可以访问所有父作用域的属性。v-for 还支持一个可选的第二个参数，即当前项的索引。
使用数组
<ul id="example-2">
<li v-for="(item, index) in items">
{{ parentMessage }} - {{ index }} - {{ item.message }}
</li>
</ul>
也可以不带索引，例如：
<ul id="example-1">
<li v-for="item in items">
{{ item.message }}
</li>
</ul>
使用对象
直接使用对象的值
<ul id="v-for-object" class="demo">
<li v-for="value in object"> // 只有对象的字段对应的值，用到
{{ value }}
</li>
</ul>
同时使用对象的value 和 key
提供第二个的参数为 property 名称 (也就是键名)：
<div v-for="(value, name) in object">
{{ name }}: {{ value }}
</div>
甚至同时使用 value key index
<div v-for="(value, name, index) in object">
{{ index }}. {{ name }}: {{ value }}
</div>
注意事项
对于数组和
数组更新检测
对象变更检测注意事项
Vue 不能检测以下数组的变动
当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue
当你修改数组的长度时，例如：vm.items.length = newLength
可以用下面的方法
Vue.set(vm.items, indexOfItem, newValue)
Vue 不能检测对象属性的添加或删除：
var vm = new Vue({
data: {
a: 1
}
})
// `vm.a` 现在是响应式的
vm.b = 2
// `vm.b` 不是响应式的
对于已经创建的实例，Vue 不允许动态添加根级别的响应式属性。但是，可以使用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性。例如，对于：
var vm = new Vue({
data: {
userProfile: {
name: 'Anika'
}
}
})
你可以添加一个新的 age 属性到嵌套的 userProfile 对象：
Vue.set(vm.userProfile, 'age', 27)
注意 vue.set 并不能添加 根级属性，只能嵌套添加已存在的对象里面的属性
v-html
v- 默认输出纯文本，可以使用 v-html ="html 变量" 来插入html 代码
生成的标签，酱被插入到 当前标签的下级
v-bind
使用 v-bind :atributeName = "变量" 来动态改变标签的 属性
如 <p v-bind:class="classvar"> </p>
v-on
vue 函数写在 methods 里面
使用 v-on 可以绑定 事件 , 并在触发时运行一些 JavaScript 代码。
<div id="example-1">
<button v-on:click="counter += 1">Add 1</button>
<p>The button above has been clicked {{ counter }} times.</p>
</div>
var example1 = new Vue({
el: '#example-1',
data: {
counter: 0
}
})
// 也可以用 JavaScript 直接调用方法
vm.funname() # 函数名加（） 运行
例如 v-on : event = "funcname" 有参数要加（）
v-model
实现双向绑定 使用 v-model ,例如下面的，就可以用input 来绑定和改变一个vue 里的变量
<input v-model = "var-name">
...data:{
var-name:"",
}
模版变量内支持 js 代码
如
{{ a + 1 }}
{{ ok ? "ok" : "no"}}
{{ message.split(" ").join("xx") }}
修饰符
比如阻止冒泡用 .stop
<p @click.stop = "func"> </p>
检测变量变化，触发回调函数
使用 vm.开头的是vue的内置变量，具有特定功能
vm.$watch("varname",function(newval,oldval){
# 会持续检测变化，一旦变化，就会触发回调函数
do your code
})
自定义 指令 Vue.directive
参考：
自定义指令 vue 文档
Vue.directive('highlight',function (el){ // 自己注册指令 使用 directive api
// el 是使用指令的元素
let blocks = el.querySelectorAll('pre');
blocks.forEach((block)=>{
hljs.highlightBlock(block)
})
})
使用例子：
<li v-highlight>
生命周期
pass
vue 的小知识点总结
data 里面的属性可以直接写 { } ，也可以用一个已经定一个的变量直接赋值
，然后比如
var vm = new Vue({
el:"xx",
data :{xx} // 此处的对象可以用外面定义好的
})
在初始化 vue 之后再对data 的属性进行添加，是不会渲染到页面的，所以，初始化的时候应该对所有的属性，先定义好初始值。
data 的改变，可以使用 vm.xx = xx ,如果data 是直接引用外面的 对象，也可以直接对外面的对象直接改变，来实现动态改变vm 属性的方法。
vm可以直接用 . 访问 data 里面的变量
注意：我在django 做的页面，用了 {{ }} 怎么搞都不生效，后来发现，我傻了，和django 模版语法起了冲突。
解决办法：
网友评论