快捷導(dǎo)航

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

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

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

初始Vue

什么是Vue？

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

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

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

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

在這里插入圖片描述

Vue的特點(diǎn)：

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

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

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

搭建Vue開發(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

在這里插入圖片描述

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

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

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

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

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

3、root容器里的代碼被稱為[Vue模板]

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

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

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

7、一旦data中的數(shù)據(jù)發(fā)生改變,那么頁面中用到該數(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代碼(語句)

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

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

<!--準(zhǔn)備容器 為Vue提供模板 把Vue的成果展示-->
<div id="root">
    <!--{{js表達(dá)式}}  插值語法-->
    <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中用于存儲數(shù)據(jù) 數(shù)據(jù)供el所指定的容器去使用,值暫時(shí)寫成一個(gè)對象.
            data:{ 
                name:"南風(fēng)知我意",
                address:"上海"
            }
        })
    </script>
</body>
</html>

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

在這里插入圖片描述

Vue模板語法

Vue模板語法有兩大類

1、插值語法:

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

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

2、指令語法:

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

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

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

<!--準(zhǔn)備容器-->
<div id="root">
  <h1>插值語法</h1>
  <h3>你好,{{name}}</h3>
  <hr/>
  <h1>指令語法</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流向頁面

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

備注:

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

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

<!--準(zhǔn)備一個(gè)容器-->
<div id="root">
    <!--普通寫法-->
<!--  單向數(shù)據(jù)綁定:<input type="text" v-bind:value="name"><br>
  雙向數(shù)據(jù)綁定:<input type="text" v-model:value="name"><br>-->
    <!--簡寫-->
    單向數(shù)據(jù)綁定:<input type="text" :value="name"><br>
    雙向數(shù)據(jù)綁定:<input type="text" v-model="name"><br>
    <!--如下代碼 錯(cuò)誤: v-model只能應(yīng)用在表單類元素(輸入類元素)上-->
    <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的兩種寫法

data與el的兩種寫法

1、el有2種寫法

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

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

2、data有2種寫法

(1)對象式

(2)函數(shù)式

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

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

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

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



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

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

MVVM模型

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

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

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

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

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

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

<!--準(zhǔn)備容器-->
<div id="root">
  <!--view-->
  <h1>學(xué)校名稱:{{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:'長沙'
    }
  })
  console.log(vm)
</script>

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

通過一個(gè)對象代理對另一個(gè)對象中屬性的操作(讀、寫)

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

通過vm對象來代理data對象中的屬性的操作(讀、寫)

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

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

3、基本原理

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

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

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

<!--準(zhǔn)備容器-->
<div id="root">
    <!--view-->
    <h1>學(xué)校名稱:{{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:'長沙'
        }
    })
</script>

Vue中的事件處理

事件的基本使用:

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

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

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

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

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

<!--準(zhǔn)備容器-->
<div id="root">
    <h1>歡迎來到尚硅谷學(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>

在這里插入圖片描述