1. vue的基础语法介绍
1-1基本数据绑定
1 | <div id="app"> |
在这个例子中我们可以进行赋值
1 | var app = new Vue(...); |
1-2 v-html命令
1 | <div id="app" v-html="msg"> |
1-3 v-on:click||@click指令
1 | <div id="app"> |
1-4 v-bind 属性绑定指令
例如绑定class 和id 已经已经存在的属性 和自定义属性
绑定类名
1 | <div id="app"> |
1-5 v-show
根据值的真假 控制元素的display的属性
1 | <div id="app"> |
1-6 v-text
赋予文本值
1 | <div id="app"> |
1-7 v-for
循环
1 | <div id="app"> |
1-8 v-model 双向数据绑定
1 | <div id="app"> |
1-9 template属性
1 | <div id="app"> |
最终的效果是把id为app的div直接替换成template里面的元素
注意在template的值中不能含有兄弟根节点
1 | new Vue({ |
这样是错误的 , 在template 可以把团苏片段放在script标签内
1 | <div id="app"> |
2. vue实例中的属性
2-1 el
el表示在vue的实例中的作用范围
1 | new Vue({ |
2-2 data
data的属性就是数据绑定
1 | new Vue({ |
2-3 methods
methods绑定事件
1 | new Vue({ |
2-3 template
template模板的绑定
1 | new Vue({ |
2-4 render
render模板的绑定
1 | new Vue({ |
3. vue的自定义指令
在vue中除了内置的指令如v-for、v-if…,用户可以自定义指令官网
1 | //这里定义v-focus |
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind:只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
- inserted:被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。
- update:所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
- componentUpdated:指令所在组件的 VNode 及其子 VNode 全部更新后调用。
- unbind:只调用一次,指令与元素解绑时调用。
4. vue的扩展
4-1 v-bind根据条件绑定类名
案例 比如现在在true的情况下绑定red类名
1 | <div id="app"> |
4-2 v-on || @eventName 事件绑定 有一个事件修饰符
1 | //阻止事件冒泡 |
5. vue的计算属性 -computed
例如一个案例需要过滤一些列表
而我们需要利用v-for进行循环出来列表
需要用到我们的实例的属性
computed 说透点就是过滤你的数据根据你的条件进行过滤
1 | //js |
6. vue的组件
6-1 底层学习组件
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素,封装可重用的代码。在较高层面上,组件是自定义元素,Vue.js 的编译器为它添加特殊功能。在有些情况下,组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。
1 | //html |
6-2 父子组件通信
利用props进行传值
1 | //局部组件 |
如果需要传的值在vue的实例中
1 | //html |
7. vue获取dom元素
1 | 在想获取的元素身上 |
8. vue渲染dom是异步$.nextTick()函数
因为vue渲染dom是异步的所以直接操作dom是会出错的
案例 例如 创建vue实例的时候请求接口数据,然后要进行dom元素操作
1 | new Vue({ |