新手入門如何學習vue

這次帶給大家新手入門如何學習vue，新手入門學習vue的注意事項有哪些，以下就是實戰案例，一起來看一下。

一、vue是什麼

Vue 是一套用來建立使用者介面的 漸進式框架 。

壓縮後僅有17kb

二、vue環境建置

你直接下載並用<script> 標籤引入， Vue 會被註冊為一個全域變數。 </script>

但在用 Vue 建置大型應用程式時建議使用 NPM 安裝。

這裡推薦一下是用淘寶的cnpm，非常的快

npm install -g cnpm --registry=https://registry.npm.taobao.org

然後進行安裝

# 全局安装 vue-cli
 npm install --g vue-cli
# 创建一个基于 webpack 模板的新项目
 vue init webpack my-project
# 安装依赖，走你
 cd my-project
 npm run dev

三、第一個vue應用

nbsp;html>


 <meta>
 <title></title>


 <p>
  </p><p>{{title}}</p>
  <button>单击事件</button>
  <p>今年{{age}}</p>
  <input>
 


<script></script>
<script></script>
var app = new Vue({  //通过构造函数Vue就可以创建一个Vue的根实例，并启动Vue应用
 el: '#app', //指定页面上一个已经存在的DOM元素来挂载Vue实例
 data: {  //对象的数据
  title: 'hello vue', //通过插值语法{{}}绑定
  age: 22  //通过v-model进行双向数据绑定
 },
 methods: { //对象的方法
  say: function(){
   console.log(this.title);
  }
 },
 watch: { //监听数据的变化
  'age': function(newVal, oldVal){
   console.log(newVal, oldVal);
  }
 }
});

#四、Vue

每個Vue 實例建立時，都會經歷一系列的初始化過程，同時也會呼叫對應的生命週期鉤子，我們可以利用這些鉤子，在適當的時機執行我們的業務邏輯。

大體上的生命週期就是：創建（created)---掛載(mounted)---銷毀(destroy)
Vue 的生命週期鉤子比較常用的有：

• created 實例建立完成後調用，此階段完成了資料的觀測等， 但尚未掛載， $el 還不可用。 需要初始化處理一些資料時會比較有用． • mounted el 掛載到實例上後調用， 一般我們的第一個業務邏輯會在這裡開始。

• beforeDestroy 實例銷毀之前呼叫。 主要解綁一些使用addEventListener 監聽的事件等。 ###

var app =new Vue({
 el: '# app',
 data: {
  a: 2
 } ,
 created: function () {
  console.log(this.a); //2
 },
 mounted: function () {
  console.log(this.el); //<p></p>
 }
});

###完整的一個生命週期圖：######### #######相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！ ######推薦閱讀：#########Vue專案應該怎麼分環境打包################webpack v4 從dev到prd的詳細步奏##########

以上是新手入門如何學習vue的詳細內容。更多資訊請關注PHP中文網其他相關文章！