目录
1.前提准备,使用VUE需要配置相应的VUE环境文件(自行准备)
1.为什么要使用VUE?
前端开发人员的首选入门框架，Vue 有很多优势：
- Vue.js 可以进行组件化开发，使代码编写量大大减少，开发者更加易于理解。
- Vue.js 最突出的优势在于可以对数据进行双向绑定（在之后的编写中我们会明显地感觉到这个特点的便捷）。
- 使用 Vue.js 编写出来的界面效果本身就是响应式的，这使网页在各种设备上都能显示出非常好看的效果。
- 相比传统的页面通过超链接实现页面的切换和跳转，Vue 使用路由不会刷新页面。
通过VUE，我们可以实现Model 和 View之间的交互的双向性， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上，这就是大名鼎鼎的双向数据绑定，也称为MVVM开发模式。
MVC软件开发模式和MVVM软件开发模式有啥区别呢？
- MVC开发模式一般用于后端应用开发
- MVVM开发模式一般用于前端应用开发
2.如何使用VUE
1.前提准备,使用VUE需要配置相应的VUE环境文件(自行准备)
2.在html中进行调用,注意对应的路径
3.写一个基础的VUE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="vue.min-v2.5.16.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="msg"/>
<p>{{msg}}</p> <!--插值表达式-->
</div>
<script>
//创建vue实例
new Vue({ //注意此处的Vue为调用对象,不能用其他名字,只能用Vue
el:'#app', //将id为app的div的管理权交给vue
data:{ //用户共享的数据
msg:null
}
});
</script>
</body>
</html>注意:
- 大小写必须写对
- new Vue是调用方法,是固定大小写,而不是命名一个对象
- el中是小写字母L,而不是1,在编译工具中l和1很容易搞混打错
- 用户共享数据是data
- 标点符号一行一逗号,而不是分号,最后一个逗号可以省略不写
3.表达式的使用
3.1插值表达式
数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对 象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新。
Vue.js 都提供了完全的 JavaScript 表达式支持
{{ number + 1 }} {{ ok ? 'YES' : 'NO' }}以上代码是JavaScript语句,不是HTML语句,三元运算符同样适用
3.2 v-model
v-model指令用来在input、select、textarea、checkbox、radio等表单控件元素上创建双向数据绑定,根据表单上的值,自动更新绑定的元素的值.
input
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <input type="text" v-model="msg"> {{msg}} </div> <script> new Vue({ el :'#app', data :{ msg: '这是一个输入框', } }); </script> </body> </html>格式如下:
select
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <select name="" id="" > <option value="" v-model="msg1"> {{msg1}} </option> <option value="" v-model="msg2"> {{msg2}} </option> <option value="" v-model="msg3"> {{msg3}} </option> </select> </div> <script> new Vue({ el :'#app', data :{ msg1: '这是第一个下选框', msg2: '这是第二个下选框', msg3: '这是第三个下选框', } }); </script> </body> </html>格式如下:
textarea
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <textarea cols="30" rows="10" v-model="msg"></textarea> {{msg}} </div> <script> new Vue({ el :'#app', data :{ msg: '这是第一个下选框', } }); </script> </body> </html>格式如下:
checkbox
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <input type="checkbox"name='text' v-model="msg1">{{msg1}} <input type="checkbox"name='text' v-model="msg2">{{msg2}} <input type="checkbox"name='text' v-model="msg3">{{msg3}} </div> <script> new Vue({ el :'#app', data :{ msg1: '这是第一个选项', msg2: '这是第二个选项', msg3: '这是第三个选项', } }); </script> </body> </html>格式如下:
radio
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <input type="radio"name='sex' v-model="msg1">男 {{msg1}} <input type="radio"name='sex' v-model="msg2">女 {{msg2}} </div> <script> new Vue({ el :'#app', data :{ msg1: '这是第一个选项', msg2: '这是第二个选项', } }); </script> </body> </html>格式如下:
3.3 v-test和v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <h1>用户注册</h1> <p v-text="msg"></p> <p v-html="msg"></p> <!-- <p v-html="msg"></p> --> </div> <script> new Vue({ el:'#app', data :{ msg : '这是一个注册页面' } }); </script> </body> </html>格式如下:
3.4 v-bind
<p v-bind:title="msg'"></p>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <p v-bind:title="msg'">这是一个网页</p> </div> <script> new Vue({ el:'#app', data :{ msg : '这是标题' } }); </script> </body> </html>格式如下:
3.5 v-bind变形形式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> <a v-bind="{href:url}" v-text="info" :tltle="msg"></a> </div> <script> new Vue({ el:'#app', data :{ info:'百度一下,你就知道', url :'https://www.baidu.com', msg:'进入百度' } }); </script> </body> </html>格式如下:
3.6 v-on监听DOM事件
可以用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码
3.6.1 v-on:click
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="vue.min-v2.5.16.js"></script> </head> <body> <div id="app"> {{msg}} <button v-on:click="fun('good')">点击改变</button> </div> <script> new Vue({ el :'#app', data : { msg : 'hello world', }, methods : { fun(msg){ this.msg=msg; } } }) </script> </body> </html>格式如下:
按钮后变化:
3.6.2 v-on简写方式
<!-- 完整语法 --> <a v-on:click="doSomething">...</a> <!-- 缩写 --> <a @click="doSomething">...</a>
4.楼宇表格数据展示
4.1 v-for
循环使用 v-for 指令。
v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。
v-for 可以绑定数据到数组来渲染一个列表。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="assets/vue.min-v2.5.16.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<table border='1'>
<tr>
<th>
<label>编号</label>
</th>
<th>
<label>单元</label>
</th>
</tr>
<tr v-for="b in bulids">
<td>{{b.num}}</td>
<td>{{b.unit}}</td>
</tr>
</table>
</div>
<script>
new Vue({
el: '#app',
data: {
bulids: [
{ 'num': '1001', 'unit': '1单元' },
{ 'num': '1002', 'unit': '2单元' },
{ 'num': '1003', 'unit': '3单元' }
]
}
});
</script>
</body>
</html>格式如下:
注意:刚开始使用v-for格式和v-model等都不太一样,要注意细节部分
4.1 v-if
条件判断使用v-if
4.2 v-show
根据表达式的值来切换元素的display css属性，说白了，就是控制一个HTML元素的显示状态（显示或隐藏），接下来我们通过一个案例来演示，在网页上通过一个按钮来控制文字的显示状态
以下案例为v-if与v-show结合示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="assets/vue.min-v2.5.16.js"></script> <title>Document</title> </head> <body> <div id="app"> <p v-if="isShow">你好世界</p> <button @click="doChange()">点我试试</button> </div> <script> new Vue({ el:'#app', data:{ isShow:true, }, methods:{ doChange(){ if(this.isShow){ this.isShow = false; }else{ this.isShow = true; } } } }); </script> </body> </html>格式如下:
按钮前:
此时的isShow为true,if判断即调用变为false
按钮后:
此时的isShow为false,所以不显示,if判断调用变为true
最后进行总结附上思维导图一份
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
