初识Vue.js

一 ，什么是Vue.js？

vue.js是一套构建用户界面的渐进式框架，它采用自底向上增量开发的设计。（自底向上设计方法是根据系统功能要求，从具体的器件、逻辑部件或者相似系统开始，凭借设计者熟练的技巧和丰富的经验，通过对其进行相互连接、修改和扩大，构成所要求的系统。）Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与单文件组件和Vue生态系统支持的库结合使用时，Vue 也完全能够为复杂的单页应用程序提供驱动。

下面先简单了解Vue.js中的几个重要组成部分：声明式渲染，条件与循环，处理用户输入和组件。

二，声明式渲染。

Vue.js 的核心是一个允许采用简洁的模板语法来声明式的将数据渲染进 DOM,即使用双大括号声明包裹数据变量，实现声明式渲染。这里的声明主要有两大类，第一类，渲染元素内部的内容；第二类，渲染元素标签里的属性。下面是演示：

html代码：第一个div，message声明起到填充文本的作用；第二个div，通过v-bind实现对元素title的操纵。

　　　　　　 <div id="smsxr">{{message}}</div>
            <div id="bind-attr">
                <span v-bind:title="message">鼠标悬浮查看加载事件。使用v_bind指令。指令一般加v_前缀，会在渲染的dom上应用特殊的响应行为，比如此处将title和message对应。</span>
            </div>

JavaScript代码：先定义Vue对象，然后通过el，data等属性将对象与dom节点绑定，从而实现dom和对象中数据及方法等的对应。

　　　　　　//声明式渲染，调用时只要{{message}}，即可使用message的值来填充dom元素的内容。
            var smsxr=new Vue({
                el:'#smsxr',
                data:{
                    message:"声明式渲染，通过双大括号声明指明数据来源！"
                }
            })
            //动态加载属性，通过动态化属性值变量来实现 v-bind:title="message".
　　　　　　 var dtjzsx=new Vue({ el:"#bind-attr", data:{ message:"文字加载于"+new Date() } })

三，条件与循环。

在JavaScript中我们通常用if和for来实现条件和循环功能。Vue中我们使用类似的v-if和v-for来实现条件和循环。使用方式是在对应标签内部通过v-if=''和v-for=''这样的指令。引号内可以是变量也可以是简单的语句。下面分别来看条件和循环的实现：

通过v-if实现元素内容的显示和隐藏：

html代码：v-if="seen”，seen为true时元素显示，为false时元素隐藏，这样通过重置seen的值就可实现对元素可见状态的操纵。

　　　　 <div id="kztj">
            <p v-if="seen">现在你可以看到我，当seen为false时你将看不到我，Vue通过v_if来控制条件。此处演示也说明我们利用Vue可以将dom结构绑定到数据，即通过数据控制dom的显示结构。</p>
        </div>

JavaScript代码：这里声明元素id为kztj的元素里面seen的取值。

　　　　　　 //v-if控制条件，seen定义处。
            var kztj=new Vue({
                el:"#kztj",
                data:{
                    seen:true
                }
            })

通过v-for实现元素的循环生成：

html代码：addListNew（）是一个自定义函数，用于实现单击后添加新的子项。定义见本段末尾。

　　   <div id="xh">
            我是通过v-for循环生成的列表<button id="xh_btn" onclick="addListsNew()">单击我添加新项</button>
            <ol>
                <li v-for="todo in todos">
                    {{todo.text}}
                </li>
            </ol>
        </div>

JavaScript代码：定义元素数据源。data本身是一个对象，它的子元素可以是对象或者特殊化的对象数组。调用时可通过v-for遍历。

　　　　　　//v-for控制循环
            var xh=new Vue({
                el:"#xh",
                data:{
                    todos:[
                        {text:"声明式渲染。"},
                        {text:"动态加载属性。"},
                        {text:"v-if控制条件。"},
                        {text:"v-for控制循环。"}
                    ]
                }
            })
　　　　function addListsNew(){
                xh.todos.push({text:"xh.todos.push添加新项。O(∩_∩)O哈哈~"});
            }

四，处理用户输入

这里的输入包括行为，操作，数据等等。例如单击，传入状态等。本例中选择的是用户的单击输入。

html代码：在标签内用v-on:click="函数名"声明click事件的响应函数。

　　　　<div id="clyhsr"><p>{{message}}</p>
            <button v-on:click="reverseMessage">逆转消息</button>
        </div>

 JavaScript代码：通过Vue的methods属性，定义响应函数reverseMessage（）。

　　　　//处理用户输入
            var clyhsu=new Vue({
                el:"#clyhsr",
                data:{
                    message:"处理用户输入,这个输入泛指，包括输入的操作，状态等等，比如单击，某个动作"
                },
                methods:{
                    reverseMessage:function(){
                        this.message=this.message.split(',').reverse().join(',')
                    }
                }
            })

 这是通过v-model双向绑定用户输入和应用状态：

html代码：v-model='message'将用户输入内容绑定到message变量上，需要时进行调用。

　　　　 <div id="sxbd">
            v-model使应用状态和用户输入之间的双向绑定变得容易。
            <p>{{message}}</p>
            <input v-model="message" />
        </div>

 JavaScript代码：初始化变量。

　　　　　　//用户输入和应用状态的双向绑定
            var sxbd=new Vue({
                el:"#sxbd",
                data:{
                    message:"用户输入和应用状态的双向绑定。"
                }
            })

五，组件化应用的构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、自包含和通常可复用的组件构建大型应用。也就是允许我们“工厂化”生产我们的应用吧。

html代码：组件调用时，在页面中添加组件标签名称，并为之添加上相应的指令。v-for遍历数据源，取得每一个元素放在item里面；v-bind:todo="item"，将遍历获得的每个元素传给组件的todo属性，用于通过模板生成元素。两个指令结合，实现了组件的实例化。（可以理解为todo属性使得todo-item组件可以实现多态吧。）

　　　　　　<div id="component">
                <ol>
                    <todo-item v-for="item in lists" v-bind:todo="item"></todo-item>
                </ol>
            </div>

 JavaScript代码：注册组件，通过组件的props属性，实现数据的跨域传递（实例化）。如，todo对于不同的Vue对象代表不同的数据，相应的todo.text也就不同，最终生成的组件也就不一样.

　　　　　　//注册组件
            Vue.component('todo-item',{
                props:['todo'],
                template:"<li>{{todo.text}}</li>"
            })
            //调用组件,每一个todo都是lists里的一个元素，v-for实现循环
            var component=new Vue({
                el:"#component",
                data:{
                    lists:[
                        {text:"第一，注册组件。"},
                        {text:"第二，像使用原始标签一样，在页面中使用组件。"},
                        {text:"第三，通过定义原始数据，个性化调用组件。"},
                        {text:"组件可以有属性，用来将数据从父域传到子域，如本例中的prop"},
                        {text:"组件可以利用v-for,v-bind，实现循环和绑定事件监听。"}
                    ]
                }
            })

 组件和自定义元素的区别：

Vue 组件非常类似于自定义元素——它是 Web 组件规范的一部分，这是因为 Vue 的组件语法部分参考了该规范。例如 Vue 组件实现了 Slot API 与 is 特性。但是，还是有几个关键差别：
1,Web 组件规范仍然处于草案阶段，并且尚无浏览器原生实现。相比之下，Vue 组件不需要任何补丁，并且在所有支持的浏览器（IE9 及更高版本）之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
2,Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流，自定义事件通信以及构建工具集成。

做个小总结，就目前认知而言，我觉得，声明式渲染主要是数据相关，数据是一个应用的核心组成部分，是一个应用的灵魂，声明式渲染就是通过一个个声明来渲染应用的各个小框架，让应用有生命，例子中的声明只简单的发生在js脚本里，如果是复杂的应用则肯定少不了服务器语言，数据库，数据来源和数据结构也会相对复杂，但是最基本的东西万变不离其宗，所以一定要掌握声明式渲染的基本原理和实现；条件与循环，判断和遍历，可理解为对声明的数据进行分析必不可少的工具，当然，一般情况下循环对数据进行遍历的同时会进行相应的操作；处理用户输入，狭义的用户输入是单纯的文本输入，广义的输入可指代用户的任何输入，也就是用户对应用的任意操作，包括单击某个按钮，刷新页面等等，这里的输入即指广义的用户输入，处理的前提是辨识输入类型分类处理，比如通过v-on:click=‘’，来辨识单击操作并指定对应的处理函数。另一种处理输入的方式是使用v-model=''，来记录用户输入，然后在需要的地方通过变量名调用；最后说说组件，Vue里的组件在理解上可以类比于html元素，但是，它又优于html元素，因为Vue组件能够实现很多复杂的功能，例如跨组件数据流，使得父子组件的解耦成为可能。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/benxiaohai-microcosm/p/6627008.html