框架知识基础"/>
VUE框架知识基础
VUE框架知识点基础
VUE框架
在说VUE框架之前那先简单介绍一下MVC和MVVM的设计模式：
前端MVC设计模式：
- MVC设计模式是将实现一个业务的所有代码划分为三部分
- M: Model 模型,指数据模型, 前端数据一般都来自于服务器
- V: View 视图, 指页面相关代码
- C: Controller 控制器, 指将数据展示到页面中的过程代码
- MVC设计模式中的C控制器部分将数据展示到页面中的过程中需要频繁进行DOM相关操作(遍历查找元素),频繁进行DOM操作浪费资源, MVVM设计模式就是为了解决此问题而诞生的
前端MVVM设计模式：
- M: Model 模式,指数据模型, 前端数据一般都来自于服务器
- V: View 视图, 指页面相关代码
- VM: ViewModel 视图模型, 视图模型将页面中可能发生改变的元素和某个变量在内存中进行绑定,当需要改变页面中的元素的之后只需要从内存中找到对应的元素即可, 不需要频繁的遍历查找,从而提高了执行效率
VUE框架
VUE框架是目前最流行的前端框架之一, 是基于MVVM设计模式的框架，现在只是简单介绍，需要引入一个js文件，将文件下载好加入自己的项目页面中即可，之后学习VUE脚手架后会方便很多。
- 引入VUE的框架地址：建议引入第一个，不行时也可以使用其他的
- Staticfile CDN(国内): .2.2/vue.min.js
- unpkg：@2.6.14/dist/vue.min.js
- cdnjs：.1.8/vue.min.js
基本格式：
<body><div><!--绑定页面的变量--><h1>{{info}}</h1>
</div>
</body>
<!--从CDN引入VUE的框架文件-->
<script src=" .2.2/vue.min.js"></script>
<script>let v = new Vue({el:"body>div",//设定管理范围data:{info:"Hello"//设置变量}})
</script>
VUE框架的运行原理:
Vue对象相当于是MVVM设计模式的VM(视图模型),负责将页面中可能发生改变的元素和某个变量进行绑定, 同时会不断的监听变量值的改变,当变量的值发生改变时Vue对象会从绑定关系中找到变量所对应的页面元素并将元素内容进行改动
VUE相关指令
注：下面的测试仅显示代码，自己测试时须引入vue框架
-
{{变量}}: 插值, 让此处的文本内容和变量进行绑定
<div><h1>{{info}}</h1> </div><script>let v = new Vue({el:"body>div",//设定管理范围data:{info:"Hello"//设置变量}}) </script> -
v-text=“变量”: 让元素的文本内容和变量进行绑定
-
v-html=“变量”: 让元素的标签内容和变量进行绑定
<div id="top">{{info}}<p v-text="info"></p><p v-html="info"></p> <!--两种操作方式区别是如果变量中添加标签时，text会正常显示所有内容，不会发生改变而html则会将标签处理后进行显示--> </div><script>let v = new Vue({el:"#top",data:{info:"文本<b>加粗</b>"}}) </script> -
v-bind:属性名=“变量” 让元素的某个属性的值和变量进行绑定, 简写是去掉v-bind直接写 :属性名
<div id="top"><a v-bind:href="url">超连接</a><!--这两种方式是一样的，下面是简写，第一种方式则需要安装vue插件--><a :href="url">超连接1</a><!--也可以操作图片--><img :src="image" alt=""> </div><script>let v = new Vue({el:"#top",data:{url:"",image:"../imgs/背景.jpg"}}) </script> -
v-model=“变量”,双向绑定,主要用在各种控件中, 变量的值会影响控件的值, 控件的值也会影响变量的值
<div id="top"><!--双向绑定时v-model的值也会影响到下面的URL的值，而v-bind则不会影响到下面的值--><input type="text" v-model="url" placeholder="请输入你要访问的地址"><a :href="url">超连接</a> </div><script>let v = new Vue({el:"#top",data:{url:"",}}) </script> -
v-on:事件名=“方法”; 事件绑定, @事件名=“方法”; 简写
<div id="top"><input type="button" value="按钮" v-on:click="f()"> <!-- 同样的两种写法效果一样，推荐第二种写法--><input type="button" value="按钮" @click="f()"> </div><script>let v = new Vue({el:"#top",data:{url:""},//方法需要写在data后面的methods中methods:{f(){alert("测试")}}}) </script> -
v-for=“变量 in 数组”; 循环遍历指令, 遍历的过程中会自动生成页面元素
<div id="top"><ul><!--遍历数组--><li v-for="name in arr">{{name}}</li></ul><ol><!--遍历对象--><li v-for="p in person">名字：{{p.name}}<br>年龄：{{p.age}}<br>昵称：{{p.nick}}</li></ol><!--使用表格的方式遍历--><table border="1"><tr><th>编号</th><th>名字</th><th>年龄</th><th>昵称</th><th>操作</th></tr><tr v-for="(p,i) in person"><td>{{i+1}}</td><td>{{p.name}}</td><td>{{p.age}}</td><td>{{p.nick}}</td><!-- 实现删除功能--><td><input type="button" value="删除" @click="del(i)"></td></tr></table><!--利用方法实现添加功能--><input type="text" v-model="emp.name" placeholder="姓名"><input type="text" v-model="emp.age" placeholder="年龄"><input type="text" v-model="emp.nick" placeholder="昵称"><input type="button" value="添加" @click="f()"> </div><script>let v = new Vue({el:"#top",data:{arr:["张三","李四","王五"],person:[{name:"张三",age:20,nick:"三"},{name:"李四",age:30,nick:"四"},{name:"王五",age:40,nick:"五"}]},methods:{f(){//向数组中添加元素v.person.push({name:v.emp.name,age:v.emp.age,nick:v.emp.nick})}，//在数组中删除元素del(i){//在数组中删除对象 splice（删除的下标，删除的数量）v.person.splice(i,1)}}}) </script> -
v-if=“布尔值变量”; true则显示元素 false则不显示(删除元素)
-
v-else 作用是和v-if状态取反
-
v-show=“布尔值变量”;true则显示元素 false则不显示(隐藏元素),频繁切换显示状态时使用
<div id="top"><h1 v-if="isShow">张三</h1><h1 v-else>李四</h1><h1 v-show="isShow">王五</h1> </div><script src=" .2.2/vue.min.js"></script> <script>let v = new Vue({el:"#top",data:{isShow:true}}) </script>
更多推荐
VUE框架知识基础
发布评论