Detailed explanation of the use of vue.js progressive framework-JS Tutorial-php.cn

This time I will bring you a detailed explanation of the use of the vue.js progressive framework. What are the precautions for the detailed explanation of the vue.js progressive framework? The following is a practical case, let's take a look.

Vue.js is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue Fundamentally adopt minimal cost, incrementally adoptable design. Vue The core library only focuses on the view layer and is easy to integrate with other third-party libraries or existing projects. On the other hand, when combined with single-file components and libraries supported by the Vue ecosystem, Vue It is also fully capable of providing powerful drivers for complex single-page applications.

Vue.js has been updated to 2.x, with certain upgrades and modifications in functions and syntax. This article first introduces the basic content.

1, Beginner’s Guide

The use of vue is very simple. Download vue.js or vue.min.js and import it directly.

2. Initial introduction to vue

2.1 Declarative Rendering

The core of Vue.js is that you can use concise template syntax to declaratively render data into DOM:

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

Copy after login

This will input: Hello Vue!

We have generated our first Vue application! This looks very similar to rendering a string template, but Vue does a lot of work behind the scenes. Now data and DOM Already tied together, all data and DOM are reactive. How do we understand all this clearly? Just turn on JavaScript in your browser Console (now open on the current page) and set the value of app.message, you will see that the DOM element rendered by the example above will update accordingly.

In addition to text interpolation, we can also bind DOM element attributes in this way:

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

Copy after login

After hovering the mouse for a few seconds, you can see dynamic prompts.

Here we encounter something new. The v-bind attributes you see are called directives. Directives are prefixed with v- to indicate that they are generated by Vue Special properties provided. As you might have guessed, they produce specialized reactive behavior on the rendered DOM. In short, what this directive does here is: "match the title attribute of this element with The message property of the Vue instance keeps the association updated."

If you open the browser's JavaScript console again and enter app2.message = 'Some new message', you will see again that the HTML bound to the title attribute has been updated.

2.1 Conditions and loops

Controlling the display of an element is also quite simple:

<p id="app-3">
 <p v-if="seen">现在你可以看到我</p>
</p>
var app3 = new Vue({
 el: '#app-3',
 data: {
 seen: true
 }
})

Copy after login

ˆContinue typing app3.seen = false in the console and you should see span disappear.

This example shows that we can not only bind data to text and attributes, but also to DOM structures. Moreover, Vue also provides a powerful Transition Effect system, which can automatically use transition effects when Vue inserts/updates/delete elements. There are other commands, each with their own special functions. For example, the v-for directive can use data in an array to display a list of items:

<p id="app-4">
 <ol>
 <li v-for="todo in todos">
  {{ todo.text }}
 </li>
 </ol>
</p>
var app4 = new Vue({
 el: '#app-4',
 data: {
 todos: [
  { text: '学习 JavaScript' },
  { text: '学习 Vue' },
  { text: '创建激动人心的代码' }
 ]
 }
})

Copy after login

3, vue instance Every Vue application starts by creating a new Vue instance through the Vue function:

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

Copy after login

Even though it does not fully follow the MVVM pattern, Vue’s design is still inspired by it. As a convention, we usually use the variable vm (short for ViewModel) to represent a Vue instance.

3.1data and methods

When creating a Vue instance, all properties found in the data object are added to Vue's reactive system. Whenever the values of these properties change, the view is "responsive" and updates with the corresponding new values.

// 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

Copy after login

Every time the data object changes, the view will be triggered to re-render. It is worth noting that if the instance has been created, only those properties that already exist in data are reactive. That is to say, if after the instance is created, a new attribute is added, for example:

vm.b = 'hi'

Copy after login

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

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

Copy after login

除了 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` 改变后调用
})

Copy after login

3.2vue实例的声明周期

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

看下这段代码。

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

Copy after login

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

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