基本使用步骤
1.导入vue.js的script脚本文件(可在官网下载)
2.在页面中声明一个将要被vue所控制的DOM区域
3.创建vm实例对象(vue的实例对象)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <!-- 要Vue控制的div --> <div id="app"> {{ username }} </div> <!-- 导入vue --> <!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> // 创建vue的实例对象 const vm = new Vue({ // el属性是固定写法，表示当前vm实例要控制页面上的那个区域，接收值是一个选择器 el: '#app', // data对象就是要渲染到页面上的数据 data: { username: '张三' } }) </script> </body> </html>
指令的概念
内容渲染指令
内容渲染指令是用来辅助开发者渲染DOM元素中的文本内容
常用的内容渲染指令：
1.v-text
2.{{ }}
3.v-html
v-text
用法示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <!-- 要渲染的DOM --> <p v-text="username"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', // 要渲染的数据 data: { username: '张三' } }) </script> </body> </html>
v-text的缺点：会覆盖元素内部原有的内容
{{}}
vue提供的{{}}语法是用来解决v-text会覆盖默认文本内容的问题，这种{{}}语法的专业名称是插值表达式
{{}}在实际开发中用的最多，只是内容的占位符，不会覆盖原有的内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>姓名：{{ username }}</p> <p>性别：{{ gender }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: '#app', data: { username: "lisi", gender: "男" } }) </script> </body> </html>
v-html
v-text和{{}}只能渲染纯文本内容，如果要把包含html标签的字符串渲染为页面的html元素，需要使用v-html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <div v-html="content"></div> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { content: "<h1>你好</h1>" } }) </script> </body> </html>
属性绑定指令
插值表达式只能用在元素的内容节点中，不能用在元素的属性节点中
在vue中可以使用 v-bind：指令为元素的属性动态绑定值
简写为英文的 ：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="text" v-bind:placeholder="tips"> <input type="text" :placeholder="tips"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
使用JavaScript表达式
在vue提供的模板渲染语法中，除了支持绑定简单的数据值外，还支持JavaScript表达式运算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p>{{ tips + '1' }}</p> <p>{{ ok ? '1' : '2' }}</p> <p>{{ tips.split('').reverse().join('') }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
在使用属性绑定期间，绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <p :title=" 'tips' + 123 ">nihao</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." } }) </script> </body> </html>
事件绑定指令
vue提供了v-on事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，原生的DOM对象有onclick、oninput等原生事件，在vue中为v-on:click、v-on:input
v-on 简写 @
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="add"> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { tips: "请输入..." }, methods: { // add: function() { // alert('11111') // } // 或 add() { alert('1111') } } }) </script> </body> </html>
要操作data中的数据，可以使用 vm.变量名 或 this.变量名
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="add"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { // add: function() { // alert('11111') // } add() { // alert('1111') // vm.num ++; this.num++; } } }) </script> </body> </html>
在使用方法时候，不传参方法默认有个事件对象参数，如果有其他参数，则需要主动传递一个 $event 参数(事件对象参数)，因为传递了其他参数，默认的事件参数会被覆盖
$event的使用场景，如果默认的事件对象被覆盖了，可以手动传递一个$ event
获取事件参数的组件， 事件对象.target
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="app"> <input type="button" value="点击" v-on:click="add"> <p>{{ num }}</p> </div> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <script> const vm = new Vue({ el: "#app", data: { num: 0 }, methods: { // add: function() { // alert('11111') // } add(e) { // alert('1111') // vm.num ++; this.num++; e.target.style.backgroundColor = "red"; } } }) </script> </body> </html>
