快捷導(dǎo)航

Vue新手指南之環(huán)境搭建及入門(mén)

更新時(shí)間：2021年08月22日 08:26:24 作者：想吃米豆腐

vue就是前端上的Java,前端上的C#,有個(gè)前端的虛擬DOM引擎,設(shè)計(jì)理念和Java/C#類(lèi)似,這篇文章主要給大家介紹了關(guān)于Vue新手指南之環(huán)境搭建及入門(mén)的相關(guān)資料,需要的朋友可以參考下

初始Vue

什么是Vue？

一套用于構(gòu)建用戶(hù)界面的漸進(jìn)式JavaScript框架

Vue可以自底向上逐層的應(yīng)用

簡(jiǎn)單應(yīng)用：只需要一個(gè)輕量小巧的核心庫(kù)

復(fù)雜使用：可以引入各式各樣的Vue插件

在這里插入圖片描述

Vue的特點(diǎn)：

1、組件化模式，提高代碼復(fù)用率，更好維護(hù)代碼

2、聲明式編碼：無(wú)需直接操作DOM，提高開(kāi)發(fā)效率

3、使用虛擬DOM+Diff算法，復(fù)用DOM節(jié)點(diǎn)

搭建Vue開(kāi)發(fā)環(huán)境

1、下載vue.js

在這里插入圖片描述

2、創(chuàng)建項(xiàng)目并導(dǎo)入idea

在這里插入圖片描述

3、官網(wǎng)下載：https://github.com/vuejs/devtools/tree/main

并使用Vue.js devtools

在這里插入圖片描述

注：在此之后你打開(kāi)的網(wǎng)頁(yè)如果是有Vue寫(xiě)的，那頭部的Vue小標(biāo)識(shí)會(huì)變成綠色

以上Vue環(huán)境就搭建ok啦

創(chuàng)建Vue實(shí)例

1、想讓Vue工作,就必須創(chuàng)建一個(gè)Vue實(shí)例且要傳入一個(gè)配置對(duì)象

2、root容器里的代碼依然符合html規(guī)范只不過(guò)混入了一些特殊的Vue的語(yǔ)法

3、root容器里的代碼被稱(chēng)為[Vue模板]

4、Vue實(shí)例和容器是一一對(duì)應(yīng)的

5、真實(shí)開(kāi)發(fā)中只有一個(gè)vue實(shí)例,并且會(huì)配合著組件一起使用

6、{{xxx}}中的xxx要寫(xiě)js表達(dá)式,且xxx可以自動(dòng)讀取到data中的所有屬性

7、一旦data中的數(shù)據(jù)發(fā)生改變,那么頁(yè)面中用到該數(shù)據(jù)的地方也會(huì)自動(dòng)更換

注意區(qū)分js表達(dá)式和js代碼

1、表達(dá)式:一個(gè)表達(dá)式會(huì)生成一個(gè)值可以放在任何一個(gè)需要值的地方

(1)a (2)a+b (3)demo(1) (4)x===y?‘a(chǎn)':‘b'

2、js代碼(語(yǔ)句)

(1)if(){} (2)for(){}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>初始Vue</title>
    <!--引入Vue開(kāi)發(fā)版-->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--準(zhǔn)備容器 為Vue提供模板 把Vue的成果展示-->
<div id="root">
    <!--{{js表達(dá)式}}  插值語(yǔ)法-->
    <h1>Hello!{{name.toUpperCase()}},{{address}}</h1>
</div>
    <script type="text/javascript">
        Vue.config.productionTip=false //以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。

       //創(chuàng)建vue實(shí)例
        new  Vue({
        //el用于當(dāng)前Vue實(shí)例為哪個(gè)容器服務(wù) 值通常為css選擇器字符串
            el:'#root',  
            //data中用于存儲(chǔ)數(shù)據(jù) 數(shù)據(jù)供el所指定的容器去使用,值暫時(shí)寫(xiě)成一個(gè)對(duì)象.
            data:{ 
                name:"南風(fēng)知我意",
                address:"上海"
            }
        })
    </script>
</body>
</html>

運(yùn)行結(jié)果：

在這里插入圖片描述

Vue模板語(yǔ)法

Vue模板語(yǔ)法有兩大類(lèi)

1、插值語(yǔ)法:

功能:用于解析標(biāo)簽體內(nèi)容

寫(xiě)法:{{xxx}},xxx是js表達(dá)式,且可以直接讀取到data中的所有屬性

2、指令語(yǔ)法:

功能:用于解析標(biāo)簽(包括:標(biāo)簽屬性、標(biāo)簽體內(nèi)容、綁定事件…)

舉例:v-bind:href=“xxx” 或簡(jiǎn)寫(xiě)為 :href=“xxx”,xxx同樣要寫(xiě)js表達(dá)式
且可以直接讀取data中的所有屬性

備注:Vue中有很多指令,且形式都是:v-???,此處我們只是拿v-bind舉例

<!--準(zhǔn)備容器-->
<div id="root">
  <h1>插值語(yǔ)法</h1>
  <h3>你好,{{name}}</h3>
  <hr/>
  <h1>指令語(yǔ)法</h1>
  <!--綁定 url當(dāng)作表達(dá)式-->
  <a v-bind:href="school.url.toUpperCase()" x="hello">去{{school.name}}</a>
 <a :href="url" x="hello">去{{name2}}</a>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false //以阻止 vue 在啟動(dòng)時(shí)生成生產(chǎn)提示。
  new Vue({
    el:'#root',
    data:{
      name:'南風(fēng)知我意',
      school:{
        name: 'csdn',
        url:'https://blog.csdn.net/weixin_50823456?spm=1000.2115.3001.5343',
      }
    }
  })
</script>

運(yùn)行結(jié)果：

在這里插入圖片描述

Vue數(shù)據(jù)綁定

Vue中有2種數(shù)據(jù)綁定的方式:

1、單向綁定( v-bind):數(shù)據(jù)只能data流向頁(yè)面

2、雙向綁定( v-model):數(shù)據(jù)不僅能從data流向頁(yè)面還可以從頁(yè)面流向data

備注:

1、雙向綁定一般都應(yīng)用在表單元素上(如:input、select等)

2、 v-model:value可以簡(jiǎn)寫(xiě)為 v-model,因?yàn)?v-model的默認(rèn)收集的就是value值

<!--準(zhǔn)備一個(gè)容器-->
<div id="root">
    <!--普通寫(xiě)法-->
<!--  單向數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br>
  雙向數(shù)據(jù)綁定:<input type="text" v-model:value="name"><br>-->
    <!--簡(jiǎn)寫(xiě)-->
    單向數(shù)據(jù)綁定:<input type="text" :value="name"><br>
    雙向數(shù)據(jù)綁定:<input type="text" v-model="name"><br>
    <!--如下代碼 錯(cuò)誤: v-model只能應(yīng)用在表單類(lèi)元素(輸入類(lèi)元素)上-->
    <h2 v-model:x="name">你好啊</h2>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  new Vue({
    el:'#root',
    data:{
      name:'南風(fēng)知我意'
    }
  })
 </script>

運(yùn)行結(jié)果：

在這里插入圖片描述

el-data的兩種寫(xiě)法

data與el的兩種寫(xiě)法

1、el有2種寫(xiě)法

(1)new Vue時(shí)候配置el屬性

(2)先創(chuàng)建Vue實(shí)例,隨后再通過(guò)vm.$mount('#root')指定el的值

2、data有2種寫(xiě)法

(1)對(duì)象式

(2)函數(shù)式

如何選擇:目前哪種寫(xiě)法都可以,以后學(xué)習(xí)到組件時(shí),data必須使用函數(shù)式,否則會(huì)報(bào)錯(cuò)

3、一個(gè)重要原則

由Vue管理的函數(shù),一定不要寫(xiě)箭頭函數(shù),一旦寫(xiě)了箭頭函數(shù) this就不再是Vue實(shí)例了

<!--準(zhǔn)備容器-->
<div id="root">
  <h1>你好,{{name}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  //el的兩種寫(xiě)法
  const v=new Vue({
    //el:'#root',  //第一種寫(xiě)法
    data:{
      name:'尚硅谷'
    }
  })
  console.log(v)
  v.$mount('#root') //第二種寫(xiě)法



  //data的兩種寫(xiě)法
  const v=new Vue({
    el:'#root',
    //data的第一種寫(xiě)法 對(duì)象式
    /*data:{
      name:'尚硅谷'
    }*/

    //data的第二種寫(xiě)法:函數(shù)式
    data(){
      console.log('@@@',this)  //此處的this是Vue實(shí)例對(duì)象
      return{
        name:'南風(fēng)知我意'
      }
    }
  })
</script>

MVVM模型

1、M:模型(Model):data中的數(shù)據(jù)

2、V:視圖(View):模板代碼

3、VM:視圖模型(ViewModel):Vue實(shí)例

觀(guān)察發(fā)現(xiàn):

1、data中的所有屬性在最后都出現(xiàn)在了vm身上

2、vm身上所有的屬性及Vue原型上的所有屬性,在Vue模板中都可以直接使用

<!--準(zhǔn)備容器-->
<div id="root">
  <!--view-->
  <h1>學(xué)校名稱(chēng):{{name}}</h1>
  <h1>學(xué)校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip=false
  const vm=new Vue({  //viewmodel
    el:'#root',
    data:{
      /*model*/
      name:'南風(fēng)',
      address:'長(zhǎng)沙'
    }
  })
  console.log(vm)
</script>

Vue數(shù)據(jù)代理

通過(guò)一個(gè)對(duì)象代理對(duì)另一個(gè)對(duì)象中屬性的操作(讀、寫(xiě))

1、Vue中的數(shù)據(jù)代理:

通過(guò)vm對(duì)象來(lái)代理data對(duì)象中的屬性的操作(讀、寫(xiě))

2、Vue中數(shù)據(jù)代理的好處

更加方便的操作data中的數(shù)據(jù)

3、基本原理

通過(guò)Object.defineProperty()把data對(duì)象中所有的屬性添加到vm上

為每一個(gè)添加到vm上的屬性都指定一個(gè)getter、setter

在getter、setter內(nèi)部去操作(讀、寫(xiě))data中對(duì)應(yīng)的屬性

<!--準(zhǔn)備容器-->
<div id="root">
    <!--view-->
    <h1>學(xué)校名稱(chēng):{{name}}</h1>
    <h1>學(xué)校地址:{{address}}</h1>
</div>
</body>
<script type="text/javascript">
    Vue.config.productionTip=false //阻止Vue在啟動(dòng)時(shí)生成生產(chǎn)提示
    const vm=new Vue({
        el:'#root',
        data:{
            name:'南風(fēng)',
            address:'長(zhǎng)沙'
        }
    })
</script>

Vue中的事件處理

事件的基本使用:

1、使用v-on:xxx 或 @xxx綁定事件其中xxx是事件名

2、事件的回調(diào)需要配置在methods對(duì)象中,最終會(huì)在vm上

3、methods中配置的函數(shù),不需要箭頭函數(shù) 否則this就不是vm了

4、methods中配置的函數(shù),都是被Vue所管理的函數(shù),this的指向是vm或組件實(shí)例對(duì)象

5、@click="demo"和@click="demo($event)"效果一致,但后者可以傳參

<!--準(zhǔn)備容器-->
<div id="root">
    <h1>歡迎來(lái)到尚硅谷學(xué)習(xí)</h1>
    <!--<button v-on:click="showInfo">點(diǎn)我提示信息</button>-->
    <button @click="showInfo1">點(diǎn)我提示信息1</button>
    <button @click="showInfo2(66,$event)">點(diǎn)我提示信息2</button>
</div>
</body>

<script type="text/javascript">
    Vue.config.productionTip=false //阻止Vue在啟動(dòng)時(shí)生成生產(chǎn)提示
    new Vue({
        el:'#root',
        data: {
            name: '尚硅谷'
        },
        methods:{
            showInfo1(event){
               /* console.log(event.target.innerHTML)
               console.log(this)  //此處的this是vm*/
                alert("同學(xué)你好1")
            },
            showInfo2(number,a){
                /* console.log(event.target.innerHTML)
                console.log(this)  //此處的this是vm*/
                alert("同學(xué)你好2")
                console.log(number,a)
            }
        }
        })
        </script>

在這里插入圖片描述