Vue教程文档：
https://cn.vuejs.org/v2/guide/
定义
实例： new Vue()
挂载点: el
数据：data
模板: template
方法：methods
计算属性: computed类似 variable = variable()
侦听器: watch 一旦数据变化都会触发
参数：props
组件：components
组件与实例的关系：每一个组件都是一个Vue实例
父组件与子组件交互：
父组件通过 属性 传递给子组件参数
子组件通过 发布事件$emit 传递给父组件参数，前提是父组件需要先 注册事件
使用
变量使用：使用插值表达式 {{ variable }}
文本替换：v-text="variable"
内容替换：v-html="content"
事件绑定：v-on:click="function" 等价于@click="function"
属性绑定: v-bind:title="variable" 等价于 :title="variable"
双向数据绑定: v-model="variable"
show语句：v-show="bool" 为真时显示
if语句：v-if="bool" 为真时加入dom
for语句：<li v-for="(item, index) of list" :key="index">{{item}}</li>
实例
第一个Vue实例 插值表达式
<div id="hello">{{ hello }}</div> <script> //Vue实例 new Vue({ el: "#hello", data: { hello: "hello world" } }) </script> hello world
挂载点， 实例， 模板
<div id="root"> <!-- 挂载点 --> </div> <script> // 实例 new Vue({ el: "#root", // 模板, 如果实例中没有定义模板，则默认使用挂载点里边的dom元素为模板 template: "<h1>hello template {{ msg }}</h1>", data: { msg: "this is message", } }) </script> hello template this is message
文本替换
<div id="text" v-text="number"></div> <script> new Vue({ el: "#text", data: { number: 123456, } }) </script> 123456
内容替换 事件绑定
方法 v-on:等价于@
<div id="html" v-on:click="handleClick" @dblclick="handleDoubleClick" v-html="content"></div> <script> new Vue({ el: "#html", data:{ content: "<h1>this is content</h1>" }, methods: { handleClick: function(){ this.content = "<h1> click</h1>" }, handleDoubleClick: function(){ this.content = "<h1>double click</h1>" } } }) </script> this is content
属性绑定
使用v-bind之后，相单于一个js表达式 等价于:title
<div id="bind" v-bind:title="'hello ' + title">this is title</div> <script> new Vue({ el:"#bind", data: { title: "this is a title" } }) </script> this is title
双向数据绑定
<div id="db-bind"> <input type="text" v-model="content"> <div>{{ content }}</div> </div> <script> new Vue({ el:"#db-bind", data: { content: "this is data double bind" } }) </script> this is data doubldasdase bind this is data doubldasdase bind
计算属性
<div id="computed"> <input type="text" v-model="firstName"> <input type="text" v-model="lastName"> <div>{{ fullName }}</div> <div>{{ count }}</div> </div> <script> new Vue({ el:"#computed", data: { firstName: "", lastName: "", count: 0 }, // 计算属性 computed: { fullName: function(){ return this.firstName + " " + this.lastName } }, // 侦听器, 一旦数据变化都会触发 watch: { fullName: function(){ this.count ++ } } }) </script>
v-if v-show v-for
<div id="vif"> <div v-if="show">v-if从dom中移除（适合一次操作）</div> <div v-show="show">v-show从dom中隐藏（适合多次操作）</div> <button @click="handleClick">toggle</button> <ul> <li v-for="item of list">{{item}}</li> <!-- 以下方法增加key，可以提升性能 --> <li v-for="(item, index) of list" :key="index">{{item}}</li> </ul> </div> <script> new Vue({ el: "#vif", data: { show: true, list: ["first", "second", "third", "fourth"] }, methods: { handleClick: function(){ this.show = !this.show } } }) </script> v-if从dom中移除（适合一次操作） v-show从dom中隐藏（适合多次操作） toggle first second third fourth first second third fourth
TodoList实例
<div id="todolist"> <input type="text" v-model="inputValue"> <button @click="handleSubmit">确定</button> <!-- 普通方式添加 --> <ul> <global></global> <li v-for="(item, index) of list" :key="index">{{ item }}</li> <local></local> </ul> <!-- 通过全局组件 --> <ul> <todo-item v-for="(item, index) of list" :key="index" :content="item" :index="index" @delete="handleDelete" ><!-- 通过全局组件 --> </todo-item> </ul> </div> <script> // 全局组件 Vue.component("global", { template: "<li>item-global</li>" }) // 组件与实例的关系：每一个组件都是一个Vue实例, Vue.component("todo-item", { props: ["content", "index"], //接收参数，通过属性传递值 template: '<li @click="handleClick">{{content}} {{index}}</li>', //显示 methods: { handleClick: function(){ this.$emit("delete", this.index) //子组件通过发布和父组件通讯 } } }) // 父组件与子组件通讯，交互 // 父组件通过 属性 传递给子组件参数 // 子组件通过 发布事件 传递给父组件参数，前提是父组件需要先 注册事件 // 局部组件 var Local = { template: "<li>item-local</li>" } new Vue({ el:"#todolist", // 注册局部组件 components: { "local": Local }, data:{ inputValue: "", list: [] }, methods: { handleSubmit: function(){ this.list.push(this.inputValue); this.inputValue = ""; }, handleDelete: function(index){ this.list.splice(index, 1) } } }) </script> 确定 item-global sf fsdfsdf item-local sf 0 fsdfsdf 1
