初识Vue.js

Posted 2020-09-06 喜欢的事用心去做

一 ，什么是Vue.js？

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

二，声明式渲染。

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代码：

　　　　　　//声明式渲染，调用时只要{{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代码：定义元素数据源。

　　　　　　//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代码：

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

 JavaScript代码：

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

五，组件化应用的构建

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

html代码：组件调用时，在页面中添加组件标签名称，并为之添加上相应的指令。

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

 JavaScript代码：注册组件，通过组件的props属性，实现数据的跨域传递。如，todo和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 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流，自定义事件通信以及构建工具集成。