當前位置：首頁 > 编程资源 > 综合教程 >内容正文

综合教程

Vue菜鸟教程(什么是vue)

發布時間：2023/12/24 综合教程 29 生活家

生活随笔收集整理的這篇文章主要介紹了 Vue菜鸟教程(什么是vue) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

Vue框架快速入門

1.Vue的認識

1.1 什么是Vue？

Vue是一個開源的javascript框架，并且Vue支持mvc和mvvm兩種模式。
Vue是一個構建數據驅動的 web 界面的漸進式框架。采用自底向上增量開發的設計。Vue.js 的目標是通過盡可能簡單的 API 實現響應的數據綁定和組合的視圖組件，是又一個js庫。
MVC：Model(模型),View(視圖),Controller(控制器)

1.2 MVVM：

1.3 vue的特性：

1.輕量：Vue.js庫的體積非常小的，并且不依賴其他基礎庫。
2.數據綁定：對于一些富交互、狀態機類似的前端UI界面，數據綁定非常簡單、方便。
3.指令：內置指令統一為(v-指令)，也可以自定義指令，通過對應表達值的變化就可以修改對應的DOM。
4.插件化：Vue.js核心不包含Router、AJAX、表單驗證等功能，但是可以非常方便地根據需要加載對應插件。
5.組件化：組件可以擴展 HTML 元素，封裝可重用的代碼。允許我們使用小型、自包含和通常可復用的組件構建大型應用

2.vue的資源安裝

2.1 直接下載vue的就是文件，然后直接拷貝到項目中，即下載vue.js文件到你的項目中。
2.2 CDN：直接在文件上使用script標簽引入js文件，這個直接使用vue官網提供的路徑，只要你電腦有網就可以用，即在直接使用script標簽引入：

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>

2.3 NPM：這個需要安裝軟件，在構建大型應用時使用
在下面的案例中我統一使用第一種方式

3.vue的使用

簡單使用vue的三部曲：
3.1 引入vue的js文件
3.2 準備一個元素，可以使用任意標簽，一般使用div
3.3 寫js代碼將上面的元素掛載起來

<body>
<!--vue使用的步驟：①先導入js的文件-->
<script src="vue/vue.min.js"></script>
<!--②創建一個div,準備和vue的關系-->
<div id="app">
{ 
{ 
msg}}
</div>
<!--③寫js代碼：然后與上面的div創建關系-->
<script>
//注意：下面的Vue的寫法,寫成vue就出不來
new Vue({ 

el:"#app",
data:{ 

msg:"hello vue",
}
})
</script>
</body>

4.Vue的重要元素

4.1 el

el的功能是完成元素的掛載 ,
可以使用id選擇器，class選擇器，標簽選擇器，但是掛載只對第一個符合條件的元素起作用，所以vue推薦使用id選擇器，id的值是唯一的

<body>
<!--①導入js文件-->
<script src="vue/vue.min.js"></script>
<!--②準備一個元素，用來綁定下面的vue-->
<div id="app" class="appClass">
{ 
{ 
msg}}
</div>
<div class="appClass">
{ 
{ 
msg}}
</div>
<!--③寫js代碼，將上面的元素掛載 -->
<script>
new Vue({ 

// el:"#app", //使用的是id選擇器，id唯一，只對對應的div有作用
// el:".appClass", //使用的是類選擇器，只能顯示一個，第二個沒有效果
el:"div",  //標簽也是，上面兩個div，網頁只能顯示一個有效果
data:{ 

msg:"hello vue...."
}
})
</script>
</body>

4.2 data

data是數據元，主要用來準備數據的，在被掛載的元素里面可以通過vue的表達式直接取到data中的數據，可以是普通類型的數據，也可以是數組，對象，而且通過vue對象改變里面數據的值，在元素中取到的值也會跟著改變。
格式：
① data:{ } 里面可以寫json格式的數據
② data(){

return {

}
}
這里將data當成函數，以返回值的形式返回數據，在return里面直接寫json格式的數據

<body>
<!--1.導入js文件-->
<script src="vue/vue.min.js"></script>
<!--2.準備一個元素-->
<div id="app">
{ 
{ 
msg}} ----- { 
{ 
sex}} <br/>
{ 
{ 
hobbies}} --- { 
{ 
hobbies[0]}}<br>
{ 
{ 
employee}} ---- { 
{ 
employee.name}} --- { 
{ 
employee.age}}
</div>
<!--3.寫js代碼，完成上面元素的掛載 -->
<script>
var vue = new Vue({ 

el:"#app",
/*data:{ msg:"今晚月色真美", sex:true, hobbies:["唱","rap","籃球"], employee:{ name:"張三", age:68, } },*/
data(){ 

return { 

msg:"今晚月色真美",
sex:true,
hobbies:["唱","rap","籃球"],
employee:{ 

name:"張三",
age:68,
}
}
}
})
alert(0);
vue.msg = "還好吧。。。";
</script>
</body>

4.3 methods

methods：就是方法，在里面可以定義多個方法，這個方法的調用有兩種方式：
1）通過Vue對象調用這個方法
2）在被掛載元素中通過表達式調用這個方法

<script src="vue/vue.min.js"></script>
</head>
<body>
<div id="app">
<!--直接在掛載元素中使用表達式調用方法-->
{ 
{ 
msg}}  { 
{ 
name}}   { 
{ 
say()}}  { 
{ 
hello("真優秀")}}
</div>
<script>
var vue = new Vue({ 

el:"#app",
data:{ 

msg:"對不起，生而為人",
name:"太宰治",
age:35
},
methods:{ 

say(){ 

alert("王權富貴");
},
hello(msg){ 

alert(this.name+msg);
//在這里改變name的值，上面的name值也會被改變
this.name = "王富貴";
}
}
})
//可以直接通vue對象調用這個方法
// vue.say();
</script>
</body>

4.4 Vue表達式

**{
{ }}**是Vue的表達式，里面代碼的寫法和js一樣，是用來取值的
在表達式中可以進行四則運算，三目運算，數組，對象，字符串都可以直接操作

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<!--首先通過表達式可以直接取值-->
{ 
{ 
msg}}  <br>
<!--表達式里面可以直接進行四則運算-->
{ 
{ 
4+2}}
{ 
{ 
4+"2"}}   <!--如果+兩邊有字符串就是字符串的拼接-->
{ 
{ 
4-2}}
{ 
{ 
4*2}}
{ 
{ 
4/2}}
{ 
{ 
num1/num2}}
<br>
<!--表達式中可以進行三目運算-->
{ 
{ 
sex?"男":"女"}} <br>
<!--通過表達式操作字符串-->
{ 
{ 
name}} --- { 
{ 
name.substr(1,3)}} --- { 
{ 
name.substring(1,3)}}
----{ 
{ 
name.substring(1,3).toUpperCase()}} <br>
<!--通過表達式操作數組-->
{ 
{ 
hobbies}} --- { 
{ 
hobbies[0]}} ---- { 
{ 
hobbies.length}}
<br>
<!--通過表達式操作對象-->
{ 
{ 
employee}}  { 
{ 
employee.name}}
{ 
{ 
employee.say()}}
</div>
<script>
var vue = new Vue({ 

el:"#app",
data:{ 

msg : "以后不說臟話",
num1:4,
num2:4,
sex:true,
name:"dafsfegeg",
hobbies:["唱跳","rap","籃球"],
employee:{ 

name:"王五",
age: 18,
say(){ 

return "我是"+this.name;
}
}
},
})
</script>
</body>

5.vue的常用指令

指令名稱	指令作用	備注
v-html	顯示與解析HTML代碼	等效與JS的innerHTML
v-text	原封不動的展示	等效與JS的innerText
v-for	遍歷與循環功能	遍歷數字，字符串,對象,數組
v-bind	綁定屬性	簡單形式 :屬性名=“值”
v-model	雙向綁定	只支持input,select,textarea
v-show	顯示與隱藏	隱藏只是樣式:style=“display=none”
v-if	判斷	v-if/v-else-if/v-else是一組
v-on	綁定事件	簡寫形式 @事件名=方法名()

5.1 v-html與v-text

1)、直接使用{
{}}表達式取值，會將內容原樣輸出
2)、v-html指令：可以解析里面的HTML標簽，和innerHTML的用法一樣
3)、v-text指令：只能將文本原樣輸出，和innerText的用法一樣

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<span id="span"></span> <br>
<span>{ 
{ 
msg}}</span><br>
<span v-html="msg"></span>
<span v-text="msg"></span>
</div>
<script>
//使用原生js的方式對span插入值
document.getElementById("span").innerHTML = "<h3>我是一個div</h3>";
new Vue({ 

el:"#app",
data:{ 

msg:"<h1>我想帶一人回云深不知處，帶回去，藏起來</h1>"
},
methods:{ 
}
})
</script>

5.2 v-for

v-for循環遍歷，可以用來遍歷Array、Object 、number 、string、Iterable。
語法：v in Object v是自定義的變量，Object是我們需要遍歷的對象
1）遍歷number數字：
就是普通的循環：for(var i=1;i<=數字;i++)
2）遍歷String就是將字符串中的每一個字母都拿出來
3）遍歷Object對象，v-for=”(v,k,i) in 對象”
v:代表對象的屬性值
k:代表對象的屬性名
i:代表索引
4）遍歷Array數組，v-for=”(v,i) in 數組”
v:代表對象的屬性值
i:代表索引

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<!--遍歷數字：下面的v in num等效于 for(var i=1;i<=num;i++){ 
}-->
<ul>
<li v-for="v in num">{ 
{ 
v}}</li>
</ul>
<!--遍歷字符串：會將字符串中的字母一個個遍歷出來-->
<ul>
<li v-for="v in name">{ 
{ 
v}}</li>
</ul>
<!--遍歷數組：會將字符串中的字母一個個遍歷出來
v,i  第一個參數v是具體的值，第二個參數i是該值對應的索引  -->
<ul>
<li v-for="(v,i) in hobbies">{ 
{ 
v}}--{ 
{ 
i}}</li>
</ul>
<!--遍歷對象：v,k,i 第一個參數v是具體的值，第二個參數k是這個只對應的key，i是索引-->
<ul>
<li v-for="(v,k,i) in employee">{ 
{ 
k}} -- { 
{ 
v}}--{ 
{ 
i}}</li>
</ul>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 

num:5,
name:"liqiao",
hobbies:["唱跳","rap","籃球"],
employee:{ 

name:"張三豐",
age:18,
},
},
})
</script>

5.3 v-bind

v-bind是給被掛載的元素綁定屬性，當是一個元素對象的時候，也可以直接綁定
語法：
v-bind:屬性名=“值” ，值是定義的Vue中的data的數據
還有可以使用簡寫形式–> :屬性名=“值”

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<img v-bind:src="srcVal" v-bind:height="heigth"/>
<img :src="srcVal" :height="heigth">
<!--綁定一個對象:v-bind="值"，注意img中的數據src和會height會被綁定到屬性上，所以必須和img的屬性名一致-->
<img v-bind="img"/>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 

srcVal:"timg.jpg",
heigth:400,
img:{ 

src:"timg.jpg",
height:200,
}
},
})
</script>
</body>

5.4 v-model

v-model：用于雙向的數據綁定，只能用在input/select/textarea這三個標簽上

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<input type="text" v-model="inputVal"/>
{ 
{ 
inputVal}}
<hr>
愛好：<input type="checkbox" value="1" v-model="checkboxVal" />看電影
<input type="checkbox" value="2" v-model="checkboxVal" />打籃球
<input type="checkbox" value="3" v-model="checkboxVal" />唱歌
<input type="checkbox" value="4" v-model="checkboxVal" />看小說
<br>
{ 
{ 
checkboxVal}}
<hr>
性別：<input value="1" v-model="radioVal" type="radio" />男
<input value="2" v-model="radioVal" type="radio" />女
<br/>
{ 
{ 
radioVal}}
<hr>
<select v-model="selectVal">
<option value="1">中國</option>
<option value="2">日本</option>
<option value="3">美國</option>
</select><br>
{ 
{ 
selectVal}}
<hr>
<textarea v-model="textareaVal"></textarea><br>
{ 
{ 
textareaVal}}
</div>
<script>
new Vue({ 

el: "#app",
data:{ 

inputVal:"人間失格",
checkboxVal:["1","3"],
radioVal:2,
selectVal:2,
textareaVal:"fhsaofhpweg"
}
})
</script>
</body>

5.5 v-on

v-on：事件綁定，給被掛載的元素綁定事件
語法：<標簽名 v-on:事件名=方法名()>
簡寫形式：<標簽名 @事件名=方法名() >

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<button v-on:click="say()">點我啊</button>
<button v-on:click="hello('是個渣男')">你在點我啊</button>
<button v-on:click="age++">{ 
{ 
age}}</button>
</div>
<script>
var vue = new Vue({ 

el:"#app",
data:{ 

name:"張無忌",
age:22,
},
methods:{ 

say(){ 

alert("點啊，你個瓜娃子");
},
hello(msg){ 

alert(this.name+msg);
}
}
})
</script>
</body>

6.vue的組件（自定義標簽）

6.1 組件的注意事項

1）先創建組件再進行掛載
2）組件的template有且只有一個外部標簽
3）組件取名如果是駝峰命名,使用-表示例: MyTagHaha ->

6.2 全局組件

語法：Vue.component(‘組件名’,{

template:” 里面寫模板代碼 “,
})
通過Vue定義的組件，就是一個全局的組件，在所有被掛載的元素里面都可以使用
注意：下面的組件名是myTag，然后在使用時候必須寫才能識別

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<my-tag></my-tag>
</div>
<div id="app2">
<my-tag></my-tag>
</div>
<script>
Vue.component('myTag',{ 

template:"<div><h1>你今天開心嗎？</h1><h3>開心啊</h3></div>",
})
new Vue({ 

el:"#app2",
data:{ 
}
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>

6.3 局部組件

局部組件是在定義的一個Vue對象里面定義的組件，在一個Vue對象中可以定義多個組件，所以使用的關鍵字是components
語法：new Vue({

el:”#app”,
components:{

“組件名”:{

template:” 在里面寫模板代碼 “
}
}
})

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<script>
new Vue({ 

el:"#app",
data:{ 
},
components:{ 

"mytag":{ 

template:"<h1>我很愛國</h1>"
}
}
})
</script>
</body>

6.4 組件的細節

vue的組件的使用，像下面這樣使用template在里面寫HTML代碼不方便，如果代碼量太多就不好寫，所以有兩種方式可以解決這個問題：
1）直接使用template標簽，將模板中的代碼直接寫在template標簽里面
2）使用script標簽，設置type=“text/template”，然后在標簽里面寫模板中的代碼

使用template標簽的代碼：
注意：如果template標簽直接寫在掛載元素里面，是可以直接顯示模板代碼效果的，但是不要這樣做

</head>
<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<template id="form">
<form>
姓名：<input type="text" placeholder="用戶名" /><br>
密碼：<input type="password" placeholder="密碼" /><br>
<button type="button" @click="say()">{ 
{ 
msg}}</button>
</form>
</template>
<script>
Vue.component('mytag',{ 

// template:"<div>我想去南極</div>>",
template:"#form",
data(){ 

return { 

msg:"點我啊"
}
},
methods:{ 

say(){ 

alert("你好啊");
}
}
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>

使用script標簽的代碼：

<body>
<script src="vue/vue.min.js"></script>
<div id="app">
<mytag></mytag>
</div>
<script type="text/template" id="myjstemp">
<form action="" method="post">
名稱：<input type="text" name="username"/><br>
密碼：<input type="password" name="pwd"/><br>
<button type="button">登錄</button><br>
</form>
</script>
<script>
Vue.component('mytag',{ 

template:"#myjstemp",
})
new Vue({ 

el:"#app",
data:{ 
}
})
</script>
</body>

總結

以上是生活随笔為你收集整理的Vue菜鸟教程(什么是vue)的全部內容，希望文章能夠幫你解決所遇到的問題。

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

上一篇：腾讯广告游戏行业7月买量月报&
下一篇：计算机的中央处理器CPU包括运算器和什么