声明式渲染
响应式声明渲染机制
- Vue 是一个响应式系统。
- Vue.js 用模板语法声明式将数据渲染进 DOM 系统。
- 视图是来自状态声明映射，状态发生变化，数据自动渲染。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<p>{{message}}</p>
</div>
<script>
var myData={
message:"hello Vue.js"
}
var app=new Vue({
el:'#app',
data:myData
})
</script>
</body>
</html>
运行结果：hello Vue.js
条件与循环
v-if指令
v-if 指令可以完全根据表达式的值在DOM 中生成或移除一个元素。
<div id="app">
<p>{{name}}</p>
<p>{{interesting}}</p>
<p v-if="seen">这是个人简单信息</p>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
name:"YanHilin",
interesting:"sport",
seen:true
}
})
</script>
v-for指令
通过一个对象的属性来迭代
<ul id="repeat-object" class="demo">
<li v-for="value in object">
{{value }}
</li>
</ul>提供第二个的参数为键名
<div v-for="(value, key) in object">
{{key }} : {{ value }}
</div>
提供第三个参数为索引
<div v-for="(value, key, index) in object">
{{ index }}. {{ key }} : {{ value }}
</div>
整数迭代
<div>
<span v-for="n in 10">
{{ n}}
</span>
</div>
v-for Template
如同 v-if 模板,渲染一个包含多个元素的块，使用 v-for 遍历多个标签，就需要用 。
例子
<div id="app">
<ol >
<li v-for="total in totals">
{{total.text}}
</li>
</ol>
</div><script>
var app=new Vue({
el:"#app",
data:{
totals:[
{text:"javascript"},
{text:"vue"},
{text:"html5"},
{text:"node.js"}
]
}
})
</script>
处理用户输入
为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法.
v-on指令
v-on 指令绑定一个事件监听器，v-on 指令用于绑定 HTML的单击事件用 v-on:click 缩写为 @click。
<div id="app">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
</div><script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue.js!'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
</script>
v-model指令
v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
v-model 指令在表单控件元素上创建双向数据绑定，根据控件类型它能够自动选取正确的方法来更新元素。
例子
<div id="app">
<p>{{ message }}</p>
<input v-model="message">
</div><script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
組件化应用构建
组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。
组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展HTML 元素，封装可重用的代码。
在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。
Vue.js 的组件使用有三个步骤，具体步骤如下：
- 调用Vue.extend() 方法创建组件构造器
var MyComponent = Vue.extend({
// 选项
}) - 调用Vue.component() 方法注册组件。
Vue.component('my-component', MyComponent) - 在Vue 实例的作用范围使用组件。
<div id="app">
<my-component></my-component>
</div> 例子:自定义组件
<div id="app">
<my-component>
</my-component>
</div>
<script>
var myComponent=Vue.extend({
template:'<div>欢迎来到component</div>'
})
Vue.component('my-component',myComponent);
new Vue({
el:"#app"
})
</script>
