前些天發(fā)現(xiàn)了一個巨牛的人工智能學習網(wǎng)站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉(zhuǎn)到教程。
Vue教程文檔：?
https://cn.vuejs.org/v2/guide/
定義
實例： new Vue()?
掛載點: el?
數(shù)據(jù)：data?
模板: template?
方法：methods?
計算屬性: computed類似 variable = variable()?
偵聽器: watch 一旦數(shù)據(jù)變化都會觸發(fā)?
參數(shù)：props?
組件：components?
組件與實例的關系：每一個組件都是一個Vue實例?
父組件與子組件交互：
父組件通過 屬性 傳遞給子組件參數(shù)
子組件通過 發(fā)布事件$emit 傳遞給父組件參數(shù)，前提是父組件需要先 注冊事件
使用
變量使用：使用插值表達式 {{ variable }}?
文本替換：v-text="variable"?
內(nèi)容替換：v-html="content"?
事件綁定：v-on:click="function" 等價于@click="function"?
屬性綁定: v-bind:title="variable" 等價于 :title="variable"?
雙向數(shù)據(jù)綁定: 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
內(nèi)容替換 事件綁定
方法 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
雙向數(shù)據(jù)綁定?
? <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}},// 偵聽器, 一旦數(shù)據(jù)變化都會觸發(fā)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"], //接收參數(shù)，通過屬性傳遞值template: '<li @click="handleClick">{{content}} {{index}}</li>', ?//顯示methods: {handleClick: function(){this.$emit("delete", this.index) ?//子組件通過發(fā)布和父組件通訊}}})
? ? ? ? // 父組件與子組件通訊，交互
? ? ? ? // 父組件通過 屬性 傳遞給子組件參數(shù)
? ? ? ? // 子組件通過 發(fā)布事件 傳遞給父組件參數(shù)，前提是父組件需要先 注冊事件? ? ? ? // 局部組件
? ? ?
? 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
---------------------?
轉(zhuǎn)自：https://blog.csdn.net/mouday/article/details/80932868?
?
總結
以上是生活随笔為你收集整理的前端学习：Vue.js基本使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。
