前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。
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
---------------------
转自：https://blog.csdn.net/mouday/article/details/80932868
)
