初始Vue
初始Vue
什么是Vue？
Vue是一个渐进式的JavaScript框架，它与Angular.js、React.js并称为前端三大主流框架
Vue是一套用于构建用户界面的框架，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合
Vue的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
Vue遵循MVVM模式
MVVM与MVC
MVC是后端的分层开发模式（Model-View-Conreoller）
MVVM是前端视图层的模式，它分为3个部分：
M-model 数据模型
V-view 视图
VM-ViewModel 视图与模型的调度者
入门案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Hello Vue</title> </head> <body> <!-- Vue实例的控制区域，即V(View) --> <div id="app"> <!--v-model指令：双向绑定，同步输入框和span标签内的数据 --> <input type="text" v-model="message" /> <span>{{message}}</span> </div> <!-- 引入vue.js --> <script src="js/vue.js"></script> <script> // 创建vue实例,这就是一个VM调度者 new Vue({ el: "#app", // element,指定vue实例控制的节点区域 // 控制节点所需要的数据，即M(Model) data: { message: "hello Vue" } }) </script> </body> </html>
说明：
1.首先引入vue.js或vue.min.js
2.声明页面中需要被Vue控制的区域
3.创建Vue实例，这其实是一个VM调度者
4.el:指定vue实例控制的节点区域,data:Vue实例中需要的数据并以键值对的形式存放
5.{{}}表达式中填入JavaScript表达式，data中的键作为变量名填入，让对应数据显示在视图中
6.v-model:这是一个Vue的指令，它是唯一一个双向绑定的指令，它用来同步输入框与控制区域内其他位置的数据
常用指令
Vue指令 (Directives) 是带有 v- 前缀的特殊特性。指令引用的值预期是单个 JavaScript 表达式（v-for例外）
v-cloak
在入门案例中，我们看到可以用{{}}表达式灵活地插入数据，但是存在一个问题，当网速较慢时浏览器不会马上将{{}}
表达式渲染成数据而是作为普通文本显示出来。
为解决这一问题，Vue提供了一个v-cloak指令。页面加载时v-cloak指令指定的元素不会显示，页面完全加载完成时才显示。
<style type="text/css"> [v-cloak]{ display: none; } </style>
<p v-cloak>{{msg}}</p>
v-text
为解决上一问题，vue还提供了一个指令v-text替代{{}}表达式，不同的一点是v-text会覆盖元素内所有内容。
<div id="app"> <p>==={{msg}}===</p> <p v-text="msg">======</p> </div>
v-once
一次性地插值指令，在标签中使用了这个指令，若使用了{{}}表达式插入数据，则当{{}}中表达式的数据改变时，页面显示的数据不会更新。
v-html
在上面，我们了解了v-text显示数据，但是如果我们需要显示的数据是一段HTML代码，v-text和{{}}都将无能为力，为此，Vue提供了专门渲染HTML数据的指令
<div id="app"> <p>{{msg}}</p> <p v-html="msg"></p> </div>
v-bind与v-model
v-bind是单向数据绑定，v-model是双向数据绑定且一方只能是输入框 这一点在入门案例中已经体现得很清楚了。
由于无法将Vue实例中的data的变量直接放进html元素的各属性中，比如
<img src="imgUrl" alt="msg"/>
这样绑定的结果是图片的路径就是”imgUrl”，因此图片找不到路径。
这样的事便由v-bind来解决，它还能绑定元素的各种属性，如src、herf、class、value等。另外v-bind:还有一个简易写法：:。
<div id="app"> <img v-bind:src="imgUrl" v-bind:alt="msg"/> <img :src="imgUrl" v-bind:alt="msg"/> </div> <!-- js代码 --> <script src="js/vue.js"></script> <script> new Vue({ el:"#app", data:{ imgUrl:"https://cn.vuejs.org/images/logo.png", msg:"Vue logo" } }) </script>
v-on
它用于监听 DOM 事件，用来绑定触发事件。与v-bind一样，它也有一个简写：@。
<div id="app"> <button v-on:click="test">点击我</button> <button @click="test">点击我</button> </div> <!-- js代码 --> <script src="js/vue.js"></script> <script> var vm = new Vue({ el:"#app", methods:{ test(){ alert("hello Vue"); } } }) </script>
与el、data一样method是Vue实例的配置属性，用来存放事件方法。
如果事件方法需要参数，则在绑定时加上()传入参数。
v-if与v-show
Vue提供两个控制元素的显示与切换的指令v-if和v-show。
区别：v-if是真正意义上的隐藏元素，但是每次需要重新删除和创建元素，具有较高的切换性能消耗；v-show不会重建进行DOM的删除和创建操作，只是修改样式display:none。
另外对于v-if，Vue还提供了v-else-if和v-else搭配，但元素必须紧密连接，否则指令不被识别。
案例：
<div id="app"> <span v-if="num<=100&&num>=85">优秀{{num}}</span> <span v-else-if="num>=70&&num<85">良好{{num}}</span> <span v-else-if="num>=60&&num<70">及格{{num}}</span> <span v-else-if="num>=0&&num<=60">不及格{{num}}</span> <span v-else>不在范围内</span> <p v-show="isShow">v-show控制的元素</p> </div> <script src="../js/vue.js"></script> <script> var vm = new Vue({ el: "#app", data: { num: 95, isShow: true } }) </script>
v-for
Vue为渲染集合、数组提供了v-for指令，用法：v-for=”item in/of items”，其中items是源数据数组，而item则是被迭代的数组元素的别名。
遍历数组列表时，还可以获取到被迭代的数组元素下标。
<ul> <!--index为迭代元素的下标--> <li v-for="(item,index) in items"> {{index}}-{{item.msg}} </li> </ul>
data:{ items:[ {msg:"a"}, {msg:"b"}, {msg:"c"} ], }
v-for还可以遍历对象内的属性
<div id="app"> <ul> <!--遍历对象属性同样可以获取元素下标甚至可以获取到属性名--> <li v-for="(value,key,index) in object"> {{index}}-{{key}}-{{value}} </li> </ul> </div> <script src="../js/vue.js"></script> <script> new Vue({ el:"#app", data:{ object:{ name:"张三", age:"18" } } }) </script>
如果文章有错的地方欢迎指正，大家互相交流。感谢关注公众号JsjCoding