vue.js漸進式框架使用詳解

這次帶給大家vue.js漸進式框架使用詳解，vue.js漸進式框架使用詳解的注意事項有哪些，以下就是實戰案例，一起來看一下。

Vue.js是一套建構使用者介面(user interface)的漸進式框架。與其他重量級框架不同的是，Vue 從根本上採用最小成本、漸進增量(incrementally adoptable)的設計。 Vue 的核心庫只專注於視圖層，並且很容易與其他第三方程式庫或現有專案整合。另一方面，當與單一檔案元件和 Vue 生態系統支援的程式庫結合使用時，Vue 也完全能夠為複雜的單頁應用程式提供有力驅動。

Vue.js目前已經更新到2.x，功能和語法上有一定升級和修改，本文首先介紹基礎內容。

1、新手指南

  vue的使用非常簡單，下載vue.js或vue.min.js直接匯入即可使用。

  2、vue初步入門

2.1宣告式渲染

  Vue.js 的核心是，可以採用簡潔的模板語法來聲明式的將資料渲染為 DOM：

<p>
 {{ message }}
</p>
var app = new Vue({
 el: '#app',
 data: {
 message: 'Hello Vue!'
 }
})

  這樣就會輸入：Hello Vue！

  我們已經產生了第一個 Vue 應用程式！這看起來和渲染一個字串模板非常類似，但是 Vue 在背後做了大量工作。現在數據和 DOM 已經被關聯在一起，所有的資料和 DOM 都是響應式的。我們如何對這一切清晰領會？只需打開你的瀏覽器的 JavaScript 控制台（現在，就在目前頁面開啟），然後設定 app.message 的值，你將看到上面的範例所渲染的 DOM 元素會相應地更新。

  除了文字插值(text interpolation)，我們也可以採用這樣的方式來綁定 DOM 元素屬性：

<p>
 <span>
 鼠标悬停此处几秒，
 可以看到此处动态绑定的 title！
 </span>
</p>
var app2 = new Vue({
 el: '#app-2',
 data: {
 message: '页面加载于 ' + new Date().toLocaleString()  }
})

  滑鼠懸停幾秒後，就可以看到動態的提示。

  這裡我們遇到一些新內容。你看到的 v-bind 屬性稱為指令。指令帶有前綴 v-，表示是由 Vue 提供的專用屬性。可能你已經猜到了，它們會在渲染的 DOM 上產生專門的響應式行為。簡而言之，這裡該指令的作用就是：「將此元素的title 屬性與 Vue 實例的 message 屬性保持關聯更新」。

  如果你再次開啟瀏覽器的 JavaScript 控制台，並輸入 app2.message = '一些新的 message'，就會再次看到，綁定了title 屬性的 HTML 已經進行了更新。

2.1條件與循環

 控制切換一個元素的顯示也相當簡單：

<p>
 </p><p>现在你可以看到我</p>

var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

  繼續在控制台輸入 app3.seen = false，你應該會看到 span 消失。

  這個範例表明，我們不只是可以將資料綁定到文字和屬性，也可以將資料綁定到 DOM 結構。而且，Vue 也提供一個強大的過渡效果系統，可以在 Vue 插入/更新/刪除元素時，自動使用過渡效果。

  還有其它一些指令，每個都具有各自不同的特殊功能。例如，v-for 指令，可以使用陣列中的資料來展示一個項目清單：

<p>
 </p><ol>
 <li>
  {{ todo.text }}
 </li>
 </ol>

var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

3 、vue實例

#   每個 Vue 應用程式都是透過 Vue 函數建立一個新的 Vue 實例開始的：

var vm = new Vue({
 // 选项
})

  儘管沒有完全遵循 MVVM 模式，但是 Vue 的設計仍然受到了它的啟發。作為約定，通常我們使用變數 vm (ViewModel 的簡稱) 來表示 Vue 實例。

3.1data 和 methods

  在建立 Vue 實例時，會將所有在 data 物件中找到的屬性，都會加入 Vue 的響應式系統中。每當這些屬性的值發生變化時，視圖都會“及時回應”，並更新相應的新值。

// data 对象
var data = { a: 1 }
// 此对象将会添加到 Vue 实例上
var vm = new Vue({
 data: data
})
// 这里引用了同一个对象！
vm.a === data.a // => true
// 设置实例上的属性，
// 也会影响原始数据
vm.a = 2
data.a // => 2
// ... 反之亦然
data.a = 3
vm.a // => 3

  每當 data 物件發生變化，都會觸發視圖重新渲染。值得注意的是，如果實例已經被創建，那麼只有那些 data 中的原本就已經存在的屬性，才是響應式的。也就是說，如果在實例建立之後，新增一個新的屬性，例如：

vm.b = 'hi'

  然后，修改 b 不会触发任何视图更新。如果你已经提前知道，之后将会用到一个开始是空的或不存在的属性，你就需要预先设置一些初始值。例如：

data: {
 newTodoText: '',
 visitCount: 0,
 hideCompletedTodos: false,
 todos: [],
 error: null
}

  除了 data 属性， Vue 实例还暴露了一些有用的实例属性和方法。这些属性与方法都具有前缀 $，以便与用户定义(user-defined)的属性有所区分。例如：

var data = { a: 1 }
var vm = new Vue({
 el: '#example',
 data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
 // 此回调函数将在 `vm.a` 改变后调用
})

3.2vue实例的声明周期

  vue实例的声明周期是一个很重要的概念，理解之后可以通过它实现很多功能。

  看下这段代码。

nbsp;html>

 
  <meta>
  <title></title>
 
 
  <p>我的声明周期，大家看吧！</p>
 
 <script></script>
 <script></script>
 <script>
  //以下代码时显示vm整个生命周期的流程
  var vm = new Vue({
   el: "#container",
   data: {
    test : &#39;hello world&#39;
   },
   beforeCreate: function(){
    console.log(this);
    showData(&#39;创建vue实例前&#39;,this);
   },
   created: function(){
    showData(&#39;创建vue实例后&#39;,this);
   },
   beforeMount:function(){
    showData(&#39;挂载到dom前&#39;,this);
   },
   mounted: function(){
    showData(&#39;挂载到dom后&#39;,this);
   },
   beforeUpdate:function(){
    showData(&#39;数据变化更新前&#39;,this);
   },
   updated:function(){
    showData(&#39;数据变化更新后&#39;,this);
   },
   beforeDestroy:function(){
    vm.test ="3333";
    showData(&#39;vue实例销毁前&#39;,this);
   },
   destroyed:function(){
    showData(&#39;vue实例销毁后&#39;,this);
   }
  });
  function realDom(){
   console.log(&#39;真实dom结构：&#39; + document.getElementById(&#39;container&#39;).innerHTML);
  }
  function showData(process,obj){
   console.log(process);
   console.log(&#39;data 数据：&#39; + obj.test)
   console.log(&#39;挂载的对象：&#39;)
   console.log(obj.$el)
   realDom();
   console.log(&#39;------------------&#39;)
   console.log(&#39;------------------&#39;)
  }
 </script>

  通过控制台的打印效果可以看出来，实例化 vue 对象大致分为 创建vue实例、挂载到dom、数据变化更新、vue实例销毁 4个阶段，，注意每个阶段都有对应的钩子，我们可以通过对这些钩子进行操作，达成一些功能。虽然初学者用不太上，但是提前了解一下还是好的，到时候碰到实际功能要能想得到生命周期的钩子。         

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

ajax与jsonp的使用详解

Vue 2.0内部指令

前端开发中的多列布局实现方法

以上是vue.js漸進式框架使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！