vue初接触
1.安装配置
可以下载文件，也可以使用cdn直接引入。
使用了菜鸟教程的推荐网址：
<script src="https://unpkg.com/vue/dist/vue.js"></script>
也可以使用官网推荐的网址：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 生产环境版本，优化了尺寸和速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
2.使用vue（举例），挂载点、模板、方法：
<div id="app">{{ message }}</div> <script> var app = new Vue({ el: '#app',
template: '<p>hello</p>', data: { message: 'Hello Vue!' } }) </script>
创建一个 vue 实例，其中称 el 下的 dom 节点为我们的挂载点，也就是页面内对应的元素（element）。称template为模板，挂载点下的内容称为模板内容，模板内容可以在页面上写，也可以在template下写。只会在对应的挂载点生效。data则保存将要显示的信息，用 {{}} 在页面显示key对应的value值，{{}}这个语法称为插值表达式。template会覆盖原有的内容。
除了{{}}还有其他表达方式。例：
<div v-text="message"></div>
<div v-html="message"></div>
v-text会转义字符串内容，例message:"<h1>a</h1>"，则显示的内容为<h1>a</h1>，v-html不会转义，则显示 a 。
绑定点击事件
<div id="app"> <div v-on:click="handleClick">{{ message }}</div> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }, methods:{ handleClick: function(){alert(123)} } }) </script>
v-on:click绑定的方法，在methods里设计实现。
v-on:click可以简写成 @click
methods:{
handleClick: function(){
this.message="world
}
}
vue可以直接修改data数据，页面也会自动改变。
3.属性绑定，双向数据绑定
<div id="app"> <div v-bind:title="'sdx '+title">{{ message }}</div> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', title:"this is title" } }) </script>
鼠标移动到Hello Vue！文字时，会显示sdx this is title。v-bind：title可以缩写为：title。
单向绑定：数据控制页面的显示内容，双向绑定可以改变页面内容，也可以显示页面内容。随输入框内容的变化，div内容一起变化。使用v-model双向数据绑定。
<div id="app"> <input v-model="message"/> <div>{{ message }}</div> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!', } }) </script>
4.计算属性和侦听器
<div id="root"> 姓：<input v-model="firstname"/> 名：<input v-model="lastname"/> <div>{{fullname}}</div>
<div>{{count}}</div>
</div> <script> new Vue({ el: '#root', data: { firstname: '', lastname: '',
count:0
}, computed:{ fullname: function(){ return this.firstname+" "+this.lastname } },
watch:{
fullname: function(){this.count++},
} }) </script>
fuiiname会保存上次计算的缓存内容，只有当firstname或lastname变化时，才会重新计算并保存数据。
当watch内数据发生变化时，计数会改变。
5.v-if，v-show，v-for命令
<div id="app"> <button @click="click">show/hide</button> <div v-if="show">{{ message }}</div> <div v-show="show">{{ message }}</div> <ul><li v-for="(item,index)item of list" :key="index">{{item}}</li></ul> </div> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue', show: true, list: [1,2,3] }, methods:{ click: function(){this.show=!this.show} } }) </script>
将list列表的内容放到item中，位置下标放到index里。（index在不排序等改变位置的操作时可用，其他时候不行）
v-if时，当show为false时，该dom节点被注释。v-show则添加display：none的css样式。
6.todolist
<div id="app"> <div> <input v-model="value"/> <button @click="click">提交</button> </div> <ul> <li v-for="item of list" :key="item">{{item}}</li> </ul> </div> <script> var app = new Vue({ el: '#app', data: { value: '', list:[] }, methods:{click: function(){ this.list.push(this.value) this.value='' } } }) </script>
每点击一次提交，就会显示一个新的li，同时清除input内容。
<div id="app"> <div> <input v-model="value"/> <button @click="click">提交</button> </div> <ul> <todo-item></todo-item> </ul> </div> <script> Vue.component('todo-item',{ template:'<li>item</li>' }) var app = new Vue({ el: '#app', data: { value: '', list:[] }, methods:{click: function(){ this.list.push(this.value) this.value='' } } }) </script>
Vue.component()定义的组件称为全局组件，任何地方都能使用。
<ul> <todo-item v-for="item of list" :key="item" :content="item"></todo-item> </ul> var TodoItem={ props:['content'], template:'<li>{{content}}</li>' } new Vue({ …… components:{ 'todo-item':TodoItem } })
在Vue内设定局部组件，需设置props为从外部获取的参数。
<div id="app"> <div> <input v-model="value"/> <button @click="click">提交</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item" :index="index" @delete1="Delete"> </todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content','index'], template:'<li @click="click1">{{content}}</li>' , methods:{ click1: function(){ this.$emit('delete1',this.index) } } }) var app = new Vue({ el: '#app', data: { value: '', list:[] }, methods:{ click: function(){ this.list.push(this.value) this.value='' }, Delete: function(index){ /*从对应下标的位置删除1项*/ this.list.splice(index,1) } } }) </script>
todolist的删除功能。当li点击时，触发click1的事件，将向外触发一个事件，事件的名字是delete1，值是index。当发生delete1的事件时，会触发父组件的Delete事件，将list的下标删除。
7.组件与实例之间的关系
每一个组件都是Vue的一个实例，以下代码为例，每个组件都可以包含Vue的属性。可以称Vue为父组件，其他的为子组件。父组件向子组件传递值以属性的形式传递。
<div id="app"> <div> <input v-model="value"/> <button @click="click">提交</button> </div> <ul> <todo-item v-for="(item,index) of list" :key="index" :content="item"> </todo-item> </ul> </div> <script> Vue.component('todo-item',{ props:['content'], template:'<li @click="click1">{{content}}</li>' , methods:{ click1: function(){ alert("clicked") } } }) var app = new Vue({ el: '#app', data: { value: '', list:[] }, methods:{click: function(){ this.list.push(this.value) this.value='' } } }) </script>
<div id="add"> <input v-model="message"/> <div>{{ message }}</div> </div> <script> var app = new Vue({ el: '#app', template: '<p>hello</p>', data: { message: 'Hello Vue!', } }) </script>
