Vue.js（读音 /vjuː/, 类似于 view） 是一个渐进式JavaScript框架Vue 只关注视图层， 采用自底向上增量开发的设计。 Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 要使用Vue这个框架，肯定需要先引入Vue 我们通过new Vue()来实例化一个Vue对象，其中el:”#app”是挂载点，el后面跟着的是css选择器，其作用是确定vue实例作用于那个节点上，我们一般使用ID。在data里面定义的字段，在HTML中需要显示message的值的话，用{{message}}即可，是不是很方便？ MVVM是Model、View、View-Model模型，他将我们的数据和视图绑定在一起，当模型数据发生变化时对应的视图数据也会相应的改变，同样的，当绑定的属兔数据发生变化时，模型数据也会发生改变。 我们在input框使用v-model来双向绑定数据，这样input的value值就和message绑定在一起了。 vue的指令一般是绑定某些值，我们上面用到的v-model也是指令中的一种 v-if指令也叫条件渲染，如果值为true则显示元素，false则不显示元素 运行结果： v-else是在v-if指令为false的时候执行的语句块 运行结果： v-else-if，顾名思义，充当 v-if 的“else-if 块”，可以连续使用： 类似于 v-else，v-else-if 也必须紧跟在带 v-if 或者 v-else-if 的元素之后。 v-show指令是控制元素是否显示，v-if的区别是：
什么是Vue？
创建Vue实例
我们打开vue的官网https://cn.vuejs.org/v2/guide/<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 
vue实例<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{message}} </div> </body> <script> new Vue({ el: '#app', data() { return { message: 'hello vue' } }, }) </script> </html> MVVM模型
我们直接上代码解释，这里我们模拟一个需求，在文本框输入的内容即时显示在旁边。
在使用原生JS或者JQuery的时候，我们要先给input框定义一个change事件，然后获取这个input框的值，然后在获取下面这个标签的Text，之后再把文本框的值复制给这个标签。
但是在vue里我们只需这样做<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>vue</title> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> </head> <body> <div id="app"> <div> <input type="text" v-model="message"> </div> {{message}} </div> </body> <script> new Vue({ el: '#app', data() { return { message: 'hello vue' } }, }) </script> </html> Vue指令
接下来介绍下vue常用的指令条件渲染
v-if
<div id="app"> <p v-if="isShow">现在你看到我了</p> </div> new Vue({ el: '#app', data(){ return{ isShow:true } }, })
现在你看到我了v-else
<div id="app"> <p v-if="isShow">这是v-if</p> <p v-else>这是v-else</p> </div> new Vue({ el: '#app', data(){ return{ isShow:false } }, })
这是v-else
v-else必须要跟在v-if之后v-else-if
<div v-if="type === 'A'"> A </div> <div v-else-if="type === 'B'"> B </div> <div v-else-if="type === 'C'"> C </div> <div v-else> Not A/B/C </div> v-show指令
本网页所有视频内容由 imoviebox边看边下-网页视频下载, iurlBox网页地址收藏管理器 下载并得到。
ImovieBox网页视频下载器 下载地址: ImovieBox网页视频下载器-最新版本下载
本文章由: imapbox邮箱云存储,邮箱网盘,ImageBox 图片批量下载器,网页图片批量下载专家,网页图片批量下载器,获取到文章图片,imoviebox网页视频批量下载器,下载视频内容,为您提供.
阅读和此文章类似的: 全球云计算
官方软件产品操作指南 (170)
