Analysis of Vue.js download method and usage steps-JS Tutorial-php.cn

Analysis of Vue.js download method and usage steps

php中世界最好的语言

Release： 2018-05-22 11:01:47

Original

3358 people have browsed it

This time I will bring you the steps to analyze the downloading method and usage of Vue.js, and what are the notes for analyzing the downloading method and usage of Vue.js. The following is a practical case, let's take a look.

What is vue.js?

Vue (pronounced /vjuː/, similar to view) is a progressive framework for building user interfaces.

Instructions and downloads

The Vue.js usage documentation has been written very complete and detailed. You can view it at the following address: https://cn.vuejs.org/v2/guide/

vue.js If used as a library, you can download it at the following address: https://cn.vuejs.org/v2 /guide/installation.html

Vue.jsBasic concepts

After we download vue.js, we need Introduce vue.js through the script tag on the page. You can use the development version vue.js during development. When the product is online, it must be replaced with vue.min.js.

script type="text/javascript" src="js/vue.min.js"></script>

Copy after login

Vue code instance (create)

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title></title>
</head>
<body>
  <p id="app">{{ message }}</p>
</body>
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript">
  var vm=new Vue({
    //el属性对应一个标签 当el对象创建后，这个标签内的区域就被Vue对象接管，
    //接下来就可用Vue来做一些为所欲为的事情啦
    el:'#app',
    data : {message:'好湿呀'}
  });
  </script>

Copy after login

Data and methods

When a Vue instance is created, it adds all properties found in its data object to Vue's reactive system. When the values of these properties change, the view will "response" by matching the new values. You can also define methods in the Vue instance, and use the method to change the data in the data object in the instance. If the data changes, the data in the view will also change.

Vue instance code (method)

window.onload = function(){
var vm = new Vue({
  el:'#app',
  data:{message:'hello world!'},
  methods:{
    fnChangeMsg:function(){
      this.message = 'hello Vue.js!';
    }
  }
});
}
<p id="app">
<p>{{ message }}</p>
<button @click="fnChangeMsg">改变数据和视图</button>
</p>

Copy after login

Vus.js template syntax

Template syntax refers to how to put data into html

Data bindingThe most common form is text interpolation using "Mustache" syntax (double braces), For example:

{{ msg }}

You can also write expressions in the inserted value:

{{ number + 1 }}
{{ ok ? 'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}
<a v-bind:href="url" rel="external nofollow" >链接文字

Copy after login

Command

Directives are special attributes with the "v-" prefix. The value of the directive attribute is expected to be a single JavaScript expression. The responsibility of the directive is to reactively apply its associated effects to the DOM when the value of the expression changes. Common instructions include v-bind, v-if, and v-on.

<-- 根据ok的布尔值来插入/移除 p元素 -->
<p v-if="ok">是否显示这一段
<-- 监听按钮的click事件来执行fnChangeMsg方法 -->
<button v-on:click="fnChangeMsg">按钮

Copy after login

Vue.js Features

Simple: HTML template JSON data, then create a Vue instance, that’s it Simple.
Data-driven: Automatically track dependent template expressions and calculated properties.
Componentization: Use decoupled and reusable components to construct the interface.
Lightweight: ~24kb min gzip, no dependencies.
Fast: Precise and efficient asynchronous batch DOM updates.
Module Friendly: Install via NPM or Bower and integrate seamlessly into your workflow.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!