1 Vue简介
- 官网：https://cn.vuejs.org/
- 三大javascript mvc框架
- vue
- angular
- react
2 Vue基本使用
-
需要先下载vue模块：
npm install vue -
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!--1. 引入刚下载的vue包中js文件--> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <!--2. 使用双大括号，来使用与该标签绑定的vue实例中的数据--> <h1>我是Vue,我今年{ {age}}岁了</h1> </div> </body> </html> <script> //3. Vue框架对外暴露了一个Vue构造函数 //4. 通过这个Vue构造函数，创建实例 var vm = new Vue({ //el:挂载点设置（将Vue实例）和结构层中标签进行挂在 el: "#app", //实例数据来源 data: { age: 100 } }); //修改实例age属性值 vm.age = 23; vm.age = 99999; </script>
3 Vue中常用指令
- Vue提供了很多指令，用于操作标签的文本、样式、事件等，用法和标签的属性用法相同，且都是以v-xxx开头(v表示Vue提供)
3.1 v-text、v-html
-
用于设置标签文本内容，其对应的变量值(msg)更新，页面也更新
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <h1>下面指令是操作文本</h1> <!--1. 使用v-text指定标签文本后，在p标签中即使再写入文本，也不会生效--> <p v-text="msg"></p> <hr> <!--2. { {msg}}等同于v-text="msg"--> <p>{ {msg}}</p> <!--3. v-html：msg的值如果是一个标签，v-html会将其当作标签解析，但v-text不会，只能将其当作字符串解析--> <p v-html="msg"></p> </div> </body> </html> <script> var vm = new Vue({ //设置关联的标签 el: "#app", data: { msg: "<a href='http://www/baidu.com'>百度</a>" } }) </script>
3.2 v-show
-
根据属性值真假显示与隐藏标签，底层是通过CSS中display属性实现的
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <!--单击时，调用add方法，从而将vue.info设置为指定值，这样结合下面单击哪个按钮，就会显示哪个按钮的信息--> <!---@click与v-on:click功能相同-> <button @click="add('军事')">军事</button> <button @click="add('新闻')">新闻</button> <button @click="add('直播')">直播</button> <!--v-show后面结果为true，才显示--> <ul v-show="'军事'==info"> <li>军事军事</li> </ul> <ul v-show="'新闻'==info"> <li>新闻新闻</li> </ul> <ul v-show="'直播'==info"> <li>直播直播</li> </ul> </div> </body> </html> <script> //创建实例 var vm = new Vue({ el: "#app", data: { info: null }, //书写标签事件处理函数地方 methods: { //事件处理函数add add(a) { //修改Vue实例属性值即可 this.info = a; } }, }) </script>
3.3 v-if
-
根据属性值的真假对标签进行渲染
-
与v-show区别为，v-show只是显示或隐藏标签，但在整个节点树上这个标签还是存在的，而v-if可以直接控制节点树上的上树和下树
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <!-- 引包 --> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <h1>你的姓别是什么呀?</h1> <ul> <!--通过F12观察到，节点树上只有最后一个li标签，前两个li由于不满足条件，导致根本不存在--> <li v-if="'男'==sex">男</li> <li v-else-if="'女'==sex">女</li> <li v-else>未知</li> </ul> </div> </body> </html> <script> var vm = new Vue({ el: "#app", data: { sex: "未知" } }) </script>
3.4 v-for
-
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./vue.min.js"></script> </head> <body> <div id="app"> <h1>非常常用的指令v-for</h1> <h1>循环语句遍历数字</h1> <h2 v-for="item in 2">我是二级标题{ {item}}</h2> <h1>循环语句遍历数组</h1> <ul> <!--item为数组中元素值，index为元素索引，arr为数组，该数组必须在vue对象中定义--> <li v-for="(index,item) in arr">{ {index}}----{ {item}}</li> </ul> <table> <tr v-for="row in 9">
最低0.47元/天 解锁文章
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
