声明式渲染,文本插值
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值： Mustache 标签将会被替代为对应数据对象上 msg 属性的值。无论何时，绑定的数据对象上 msg 属性发生了改变，插值处的内容都会更新。
<div id="app">
{{ message }}
</div>
------------
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。但请留心这会影响到该节点上的其它数据绑定：
<span v-once>这个将不会改变: {{ msg }}</span>
指令
v-html
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>
v-bind
v-bind:指令带有前缀 v-，以表示它们是 Vue 提供的特殊特性。可能你已经猜到了，它们会在渲染的 DOM 上应用特殊的响应式行为。在这里，该指令的意思是：“将这个元素节点的 title 特性和 Vue 实例的 message 属性保持一致”。
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app2">
<span v-bind:title="message">
鼠标悬停
</span>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Credo!'
}
})
var app2=new Vue({
el:'#app2',
data:{
message:'页面加载于'+new Date().toLocaleString()
}
})
</script>
</body>
</html>
条件指令[v-if]
通过v-if 来控制是否显示
<div id="app3">
<p v-if="seen1">see me 1</p>
<p v-if="seen2">see me 2</p>
</div>
var app3=new Vue({
el:'#app3',
data:{
seen1:true,
seen2:false
}
})
循环指令[v-for]
<div id="app4">
<ol>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app4',
data: {
todos: [{ text: 'first' }, { text: 'vue' }, { text: 'demo' }]
}
})
处理用户输入指令[v-on]
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法.其中所有的 DOM 操作都由 Vue 来处理
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<div id="app5">
<p>{{ message }}</p>
<button v-on:click="reverseMsg">reverse</button>
</div>
var app5 = new Vue({
el: '#app5',
data: {
message: 'Hello World!'
},
methods: {
reverseMsg: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
处理双向绑定[v-model]
<div id="app6">
<p>{{ message }}</p>
<input v-model="message" />
</div>
var app6 = new Vue({
el: '#app6',
data: {
message: 'Hello Vue!'
}
})
实例生命周期钩子
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestory
- destoryed
注意事项: 生命周期钩子的 this 上下文指向调用它的 Vue 实例。
不要在选项属性或回调上使用箭头函数，比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数是和父级上下文绑定在一起的，this 不会是如你所预期的 Vue 实例，经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
使用:
new Vue({
data: {
a: 1
},
created: function () {
// `this` 指向 vm 实例
console.log('a is: ' + this.a)
}
})
扫一扫
6948
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
