前些天發現了一個巨牛的人工智能學習網站，通俗易懂，風趣幽默，忍不住分享一下給大家。點擊跳轉到教程。

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?
?

總結

以上是生活随笔為你收集整理的前端学习：Vue.js基本使用的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。