v-if : vue中的条件的判断一般使用
v-for:用于vue中的遍历 官方语言:可以绑定数组的数据来渲染一个项目列表
v-on:添加事件监听器 例如click onmouseover
v-on:click="reverseMessage"
reverseMessage:是方法的名字,方法定义在methods里面
v-model
指令能轻松实现表单输入和应用状态之间的双向绑定
|
|
组件化应用
注册组件的方法
Vue.component('todo-item', {
template: '<li>这是个待办项</li>'
})
template:里面定义的是html里面的标签
父组件和子组件之间的数据传递
v-bind:key是为了在v-for循环中给 Vue 一个提示,以便它能跟踪每个节点的身份
,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。
Vue.component('todo-item', {
props: ['todo'],
template: '<li>{{ todo.text }}</li>'
})
父组件可以获取子组件的值通过prop
<todo-item
v-for="item in groceryList"
//利用for遍历数组 得到数组中的值
v-bind:todo="item"
//将从数组中得到的值出传送到todo中
v-bind:key="item.id">
//为每一个值绑定独一无二的标记
</todo-item>
最后实现父子组件的通信
数据一般放在data中
使用 Object.freeze()
,这会阻止修改现有的属性,也意味着响应系统无法再追踪变化。
$
,以便与用户定义的属性区分开来
实例生命周期钩子
Vue 实例在被创建时都要经过一系列的初始化过程
在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
created
钩子可以用来在一个实例被创建之后执行代码:
如 mounted
、updated
和 destroyed
。生命周期钩子的 this
上下文指向调用它的 Vue 实例。
vue的模板语法
<span>Message: {{ msg }}</span>
常用于模板插值
v-once 指令,你也能执行一次性地插值,当数据改变时,插值处的内容不会更新
原始的html
原始 HTML
双大括号会将数据解释为普通文本,而非 HTML 代码。为了输出真正的 HTML,你需要使用 v-html
指令:
|
Using mustaches: <span style="color: red">This should be red.</span>
Using v-html directive: This should be red.
不能使用 v-html
来复合局部模板,
vbind:用来绑定属性
修饰符
v-bind缩写为 :
v-on 缩写 @
计算属性和侦听器
|
|
reversedMessage
。我们提供的函数将用作属性 vm.reversedMessage
的 getter 函数:
<div id="message-event-example" class="demo">
<p v-for="msg in messages">{{ msg }}</p>
<button-message v-on:message="handleMessage"></button-message>
</div>
父组件模板的内容在父组件作用域内编译;子组件模板的内容在子组件作用域内编译。