正文
Vue入门
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
一、引入vue
方法一：下载vue.js，然后像引用jquery一样，在HTML中使用script标签引入
<script src="https://unpkg.com/vue/dist/vue.js"></script>
方法二：使用架构工具，推荐使用npm安装后，然后可以直接用作 AMD 模块
var Vue = require('Vue');
二、声明式渲染
hello World实例（新建html将如下内容放在body中）
<div id="app">{{ message }}</div>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script>var app = new Vue({
el: '#app',
data: {message: 'Hello Vue!'}
})
</script>
除了绑定插入的文本内容，我们还可以采用这样的方式将数据绑定到 DOM 元素的属性
<div id="app-2">
<span v-bind:title="message">Hover your mouse over me to see my title!</span>
<!-- v-bind被称为指令，指令带有前缀 v-，以表示它们是 Vue.js 提供的特殊属性 v-bind：变量=‘数据’-->
</div>
var app2 = new Vue({
el: '#app-2',
data: {message: 'You loaded this page on ' + new Date()}
})
三、条件
<div id="app-3"><p v-if="seen">Now you see me</p></div><!-- v-if 条件指令，v-if=‘数据（布尔值）’-->
var app3 = new Vue({
el: '#app-3',
data: {seen: true}//设置为false时，P元素不渲染
})
四、循环
<ol id="app-4"><li v-for="todo in todos">{{ todo.text }}</li></ol><!-- v-for 循环指令，v-for=‘列表项 in 数组数据’-->
var app4 = new Vue({
el: '#app-4',
data: {todos:[{text: 'Learn JS'},{text:'Learn Vue'},{text: 'Build something awesome'}]}
//app4.todos.push({text:'New item'})会新增列表项
})
五、用户输入
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">Reverse Message</button><!-- v-on绑定事件指令，v-on：事件类型=‘调用函数’ -->
</div>
var app5 = new Vue({
el: '#app-5',
data: {message: 'Hello Vue.js!'},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
})
六、数据绑定
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message"><!-- v-model数据绑定指令 v-model=‘绑定的数据’-->
</div>
var app6 = new Vue({
el: '#app-6',
data: {message: 'Hello Vue!'}
})
七、组件
<ol>
<todo-item></todo-item><!--自定义组件-->
</ol>
Vue.component('todo-item', {//定义一个组件
props: ['todo'],//将数据从父作用域传到子组件
template: '<li>{{ todo.text }}</li>'
})
以下有数据传递的组件
<ol id="app-7">
<todo-item v-for="item in groceryList" v-bind:todo="item"></todo-item>
<!--先循环从groceryList数组中分别获取列表项为item，将item赋值给todo分别传递给子组件-->
</ol>
Vue.component('todo-item', {
props: ['todo'],//子元素通过props接口实现与父元素的数据传递
template: '<li>{{ todo.text }}</li>'
})
var app7 = new Vue({
el: '#app-7',
data: {groceryList: [{ text: 'Vegetables' },{ text: 'Cheese' },{ text: 'Whatever' }]}
})
