快捷導(dǎo)航

Vue安裝與使用

更新時(shí)間：2021年10月26日 14:28:02 投稿：hqx

Vue是一套用于構(gòu)建前后端分離的框架。剛開(kāi)始是由國(guó)內(nèi)優(yōu)秀選手尤雨溪開(kāi)發(fā)出來(lái)的，目前是全球“最”流行的前端框架。使用vue開(kāi)發(fā)網(wǎng)頁(yè)很簡(jiǎn)單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！下面來(lái)看看其得安裝及使用方法吧

Vue(讀音/vjuː/，類似于view) 是一套用于構(gòu)建前后端分離的框架。剛開(kāi)始是由國(guó)內(nèi)優(yōu)秀選手尤雨溪開(kāi)發(fā)出來(lái)的，目前是全球“最”流行的前端框架。使用vue開(kāi)發(fā)網(wǎng)頁(yè)很簡(jiǎn)單，并且技術(shù)生態(tài)環(huán)境完善，社區(qū)活躍，是前后端找工作必備技能！

1、Vue安裝

vue的安裝大體上分成三種方式

方式1：CDN引入

<!--開(kāi)發(fā)環(huán)境版本，包含了又幫助的警告命令-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>

<!--生成環(huán)境的版本，優(yōu)化了尺寸和速度-->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>

方式2：直接下載引入

開(kāi)發(fā)環(huán)境：https://vuejs.org/js/vue.js

生產(chǎn)環(huán)境：https://vuejs.org/js/vue.min.js

方式3：npm安裝

在用 Vue 構(gòu)建大型應(yīng)用時(shí)推薦使用 NPM 安裝。NPM 能很好地和諸如 webpack 或 Browserify 模塊打包器配合使用。同時(shí) Vue 也提供配套工具來(lái)開(kāi)發(fā)單文件組件。

# 最新穩(wěn)定版
$ npm install vue

2、基本使用

要使用Vue，首先需要?jiǎng)?chuàng)建一個(gè)Vue對(duì)象，并且在這個(gè)對(duì)象中傳遞el參數(shù)，el參數(shù)全稱是element，用來(lái)找到一個(gè)給vue渲染的根元素。并且我們可以傳遞一個(gè)data參數(shù)，data中的所有值都可以直接在根元素下使用{{}}來(lái)使用。

示例代碼如下：

<div id="app">
  {{message}}
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初學(xué)vue"
      }
    })
</script>

其中data中的數(shù)據(jù)，只能在vue的根元素下使用，在其他地方是不能被vue識(shí)別和渲染的。

比如：

<!--這里無(wú)法渲染-->
<p>{{message}}</p>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初學(xué)vue"
      }
    })
</script>

另外也可以在vue對(duì)象中添加methods，這個(gè)屬性中專門用來(lái)存儲(chǔ)自己的函數(shù)。methods中的函數(shù)也可以在模板中使用，并且在methods中的函數(shù)來(lái)訪問(wèn)data中的值，只需要通過(guò)this.屬性名就可以訪問(wèn)到了，不需要額外加this.data.屬性名來(lái)訪問(wèn)。

示例代碼如下：

<div id="app">
    <p>{{greet()}}</p>
</div>
</body>
<script>
    const app = new Vue({
      el: "#app",
      data: {
        message: "初學(xué)vue"
      },
      methods: {
        greet: function () {
          return "hello" + this.message
        }
      }
    })
</script>

到此這篇關(guān)于Vue安裝與使用的文章就介紹到這了,更多相關(guān)Vue安裝與使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: