Getting started with vue.js1.0 version

vue

vue.js is a library for building interactive web interfaces. It provides MVVM data binding and a composable component system with a simple, flexible API. Technically speaking, Vue.js focuses on the view model layer on the MVVM pattern and connects the view and model through two-way data binding. Actual DOM manipulation and output formatting are abstracted into directives and filters. Compared to other MVVM frameworks, Vue.js is easier to get started with.

Vue.js is a library for creating web interactive interfaces. It lets you create data-driven UI components through a simple and flexible API.

 <br>

Vue1.0 common syntax

<span style="font-size: 18px"><code class="hljs oxygene"><span class="hljs-keyword">var vm = <span class="hljs-keyword">new Vue(<span class="hljs-comment">{

　　el: "选择器",  挂载到页面的那个元素里，即确定vue的作用范围  外部可通过vm.$el访问，得到的是一个原生dom元素，可进行对应操作

　　a: '',  //自定义属性  外部可通过vm.$options访问

　　data: { }, <span class="hljs-comment">//实例属性都在这里面，外部通过实例名,即vm.$data调用

　　computed: <span class="hljs-comment">{ }, <span class="hljs-comment">//计算属性，也是实例属性，只是以方法的形式存在，并可以有逻辑运算的属性

　　<span class="hljs-function"><span class="hljs-keyword">method: <span class="hljs-comment">{ }, <span class="hljs-comment">//实例方法都在这里

　　watch: <span class="hljs-comment">{ }, <span class="hljs-comment">//对data和computed的属性进行监听，当属性有变化时自动触发，以方法的形式存在 外部通过$.watch调用

　　<span class="hljs-comment">//注意：以上属性和方法，实例内部都通过this调用,外部则通过对应的实例方法访问

　　<span class="hljs-comment">//在vue的生命周期过程中，它自身还提供了一系列的钩子函数供我们使用，进行自定义逻辑的注入：　　　

　　created: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 实例已经创建 }

　　<span class="hljs-title">beforeCompile: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之前 }

　　<span class="hljs-title">compiled: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模块编译之后；即模板占位符被是内容替换}

　　<span class="hljs-title">ready: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 模板插入到文档中了；相当于window.onload }//<span class="hljs-title">Vue2.0已改为<span class="hljs-title">mounted

　　注意： 以上4个方法在对象被实例化后即按顺序执行，以下2个方法需通过事件触发，并通过调用 实例名.$<span class="hljs-title">destory<span class="hljs-params">() 才执行

　　<span class="hljs-title">beforeDestroy: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之前 }

　　<span class="hljs-title">destroyed: <span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">()<span class="hljs-comment">{ 对象销毁之后 }

});<br></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></span>

Vue object parsing:

1, object Attribute

data, el, options, watch, computed

2, object method

Life cycle hook function

3, object instance access and call properties and methods

A: Instance attribute call: $options, $el, $data, $watch

Here we focus on $watch, its general syntax is:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 });     --浅度监听

If the monitored attribute is a basic data type, there is no problem with the above usage. However, if the monitored attribute is an object, the data inside the object has changed. The above method cannot be monitored, and a parameter is required. Perform in-depth monitoring, the specific syntax is as follows:

vm.$watch("监听的实例属性名",function() { // 对于监听数据变化后的业务处理代码 },{deep: true});　　--深度监听

B: Instance method call: $mount(), $log(), $destroy()

4, built-in filters & custom filters

A: The filters that come with vue are:

Capitalize (capitalize the first letter), uppercase, currency, json (equivalent to JSON.Stringify()), debounce (followed by seconds, matched with events, delayed execution)

limitBy(parameter 1, parameter 2) Commonly used expressions v-for array, limit the number of outputs and where to output; parameter 1 represents the number of outputs, parameter 2 represents the number of outputs

filterBy(parameter) filters data, filters data containing parameters, cooperates with the input input box, filters through input variables, and achieves the effect of hot search

　orderBy(parameter) sorts the data, parameters When it is 1, it is in positive order, and when it is -1, it is in reverse order. What are the other parameters? So 1 and -1 are basically common situations

B: Custom filter syntax (for timestamp processing, it is a common custom filter)

<span style="font-size: 18px"><code class="hljs actionscript">Vue.filter(<span class="hljs-string">"过滤器名称",<span class="hljs-function"><span class="hljs-keyword">function<span class="hljs-params">(参数<span class="hljs-rest_arg">...){

　　　　...  //业务处理

　　　　return <span class="hljs-rest_arg">...;

　　});<br></span></span></span></span></span></span></code></span>

5, built-in instructions and custom instructions

Instructions are an extension of HTML syntax and must start with v-. Generally speaking, the instructions in our mouth actually refer to attributes. Instructions, elements using this attribute instruction have corresponding attribute functions. The following C refers to element instructions, which are different from attribute instructions

　A: Comes with instructions: v- if, v-show, v-else, v-module, v-text, v-html, v-bind, v-on, v-el, v-cloak...

Here we focus on v-text and v-cloak: When we call instance attribute data in the template, we usually do this {{ instance attribute}}. In this case, when the network speed is relatively slow, the page will flicker and it will take a while. The brackets and the original content inside are displayed, which results in a poor user experience. There are two ways to handle this situation:

1. Use the v-clock command on larger paragraph elements. And set the css of the element: display:none

　　2. Use v-text/v-html instead of curly braces. Vue2.0 also supports this, and the curly brace method May be cancelled

　B: Custom instruction syntax:

　Vue.directive("指令名称",function(..){
　　　　this.el.style.background = 'red';   //这里的this代表new出来的实例，this.el代表原生的dom元素
　　});

Use v-command name in the template, or v-command name ="parameter", you can pass parameters when calling the command

Do not add v- when defining the command name, add v-

# when using the template ## C: Custom element directive (it is said that it is not very useful and can be ignored. The component has surpassed the effect it wants to achieve)

 Vue.elementDirective("自定义元素名称",{
　　　　bind: function() {};
　　});

It does not support B situation syntax , but the syntax in case B defaults to bind

6, custom keyboard information

Vue.directive('on'),keyCodes.ctrl = 17;  //17是ctrl的键码  等号前的ctrl是定义ctrl的别名，可以随便取，实际绑定的就是键盘上的ctrl键

template calls @keydown .ctrl="Custom method"

The above is the detailed content of Getting started with vue.js1.0 version. For more information, please follow other related articles on the PHP Chinese website!