标签：angular val 获取 调用 react 信息 action als com
一、VUE介绍
vue 以数据驱动的web渐进式框架 三大主流框架: Angular React Vue 设计模式:MVVM 1.数据驱动 => 不直接操作DOM 2.单页面web应用 => 构建的网站其实只有一个页面 3.数据的双向绑定 4.虚拟DOM 文件后缀: .vue => 组件 => Vue实例 <template></template> <script></script> <style></style> 组件化开发
1、VUE实例
v-bind 挂载点
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue实例</title> <style type="text/css"> p { width: 200px; height: 200px; background-color: red; } </style> </head> <body> <div id="app" class="app"> <p title="你真的是P">你是P</p> <!-- v-bind: 属于vue语法:vue指令 --> <!-- 第一个title是html标签的全局属性title --> <!-- 第二个title是vue的一个变量，变量名可以随意自定义 --> <p v-bind:title="title">你就是P</p> <!-- vue的变量一般需要进行初始化（赋初值） --> </div> <div id="main"> <p v-bind:title="my_title">你还是P</p> </div> </body> <!-- 在页面中引入vue --> <script src="js/vue-2.5.17.js"></script> <!-- 拥有vue环境后可以写vue支持的语法逻辑 --> <script type="text/javascript"> // 自身代码块 // 创建vue实例 new Vue({ // 将实例与页面结构进行关联, 尽量(只允许)用id进行绑定(将唯一的对象与页面唯一的结构进行一一绑定) // 该实例只操作关联的页面结构(包含子结构) // el: "#app" el: ‘.app‘, data: { title: "你就是P..." } }); // 将一个vue实例挂载到页面的一个页面结构 new Vue({ // 挂载点 el: "#main", data: { my_title: "" } }) </script> </html>
2、Vue 实例data
插值表达式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>vue实例之data</title> </head> <body> <div id="app"> <!-- 插值表达式 --> {{ msg }} {{ num }} <!-- 插值表达式中可以进行运算 --> {{ 1 + 2 + 3 * 4 }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> var app = new Vue({ el: "#app", // data: 数据 // 为挂载点内部的vue变量提供值 data: { msg: "hello world!", num: 88888 } }) </script> <script type="text/javascript"> // 普通js代码块 // 获取msg,num变量的值 // 1.得到vue实例 console.log(app); // 2.获取vue变量data: $data console.log(app.$data); // 3.获取目标变量值 console.log(app.$data.msg); // 直接获取值 console.log(app.msg); console.log(app.num); </script> </html>
3、methods
<p v-bind:title="my_title">
<p class="box" v-on:click="abcClick">{{ abc }}</p>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>methods</title> <style type="text/css"> .box { background-color: orange } </style> </head> <body> <div id="app"> <!-- v-on: 指令,操作事件的 --> <p class="box" v-on:click="abcClick">{{ abc }}</p> <p class="box" v-on:click="defClick">{{ def }}</p> <p class="box" v-on:mouseover="action">88888</p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: ‘#app‘, data: { abc: "12345 上山打老虎 老虎不在家 ...", def: "67890 呵呵" }, // methods为挂载点内部提供方法的实现体 methods: { abcClick: function (ev) { console.log(ev); console.log("abc is clicked"); }, defClick (ev) { console.log(ev); console.log("def is clicked"); }, action () { console.log("被悬浮"); } } }) </script> </html>
4、computed
<input type="text" name="xing" v-model="fisrt_name"></div>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>computed</title> </head> <body> <div id="app"> <div> <!-- v-model vue进行数据双向绑定的指令 --> <label for="xing">姓:</label><input type="text" name="xing" v-model="fisrt_name"> </div> <div> <label for="ming">名:</label><input type="text" name="ming" v-model="last_name"> </div> <div> <!-- 通过插值表达式实现 --> <div>姓名: {{ fisrt_name + " " + last_name }} </div> <!-- 通过computed实现 --> <div>姓名: {{ full_name }} </div> <!-- 通过methods实现 --> <div>姓名: {{ full_name_bac() }} </div> </div> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { fisrt_name: "", last_name: "", // full_name: "" }, // 一个变量依赖于多个变量 // 采用computed computed: { full_name: function () { // full_name对fisrt_name及last_name两个变量进行监听,两个值只有有一个变化,full_name就会随之变化,并且可以实时渲染到页面 return this.fisrt_name + " " + this.last_name; } }, methods: { full_name_bac: function () { return this.fisrt_name + " " + this.last_name; } } }) </script> </html>
5、监听 watch
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>watch</title> </head> <body> <div id="app"> <div> <label>姓名:</label> <input type="text" v-model="full_name"> </div> <p>姓: {{ first_name }} </p> <p>名: {{ last_name }} </p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 多个变量依赖于一个变量, 对该变量进行监听 new Vue({ el: "#app", data: { full_name: "", first_name: "", last_name: "" }, // 监听full_name变量,通过full_name具体修改first_name,last_name watch: { full_name () { var fullName = this.full_name; console.log(fullName); this.first_name = fullName.split(" ")[0]; this.last_name = fullName.split(" ")[1]; } } }) </script> </html>
6、delimiters 修改插值表达式默认符号
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>delimiters</title> </head> <body> <div id="app"> {{ msg }} ${ msg } </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: ‘#app‘, data: { msg: ‘message‘ }, delimiters: [‘${‘, ‘}‘] }) </script> </html>
7、生命周期钩子
表示一个VUE实例从创建到销毁的这个过程，将这个过程中的一些时间节点赋予了对应的钩子函数
钩子函数：满足特定条件被回调用的方法
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>生命周期钩子</title> </head> <body> <div id="app"> {{ msg }} </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" }, beforeCreate () { console.log("实例刚刚创建"); console.log(this.msg); }, created () { console.log("实例创建成功, data, methods"); console.log(this.msg); } // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块 }) </script> </html>
vue简介 数据驱动的web渐进式框架 数据驱动(不直接操作DOM) 单页面应用(减少由加载页面产生的请求次数) 数据的双向绑定(数据间的实时动态渲染) 虚拟DOM 组件化开发,遵循MVVM设计模式 vue实例 实例 == 组件 el: 挂载点,一般采用id,vue控制html页面结构的连接点 -- #app data: 数据,为页面变量提供数据的,一般变量都需要初始化 -- {{}}: 插值表达式,可以包含变量已经表达式 methods: 方法,为页面提供逻辑的实现体 -- v-on:事件 computed: 计算,一个变量依赖于多个变量 -- 变量名: function () { return 变量的逻辑值 } watch: 监听,多个变量依赖于一个变量 -- 变量名: function () { 多个变量依赖于此变量的逻辑代码块 } delimiters: 修改插值表达式默认符号, ["${", "}"] {{}} => ${} 变量的取值 var app = new Vue({ el: "#app", data: { msg: "message" } }) app.msg app.$data.msg 生命周期钩子 在一个vue实例从创建到销毁的整个过程中一些时间节点的回调方法 课程内容 vue的指令 什么是vue的指令 vue指令有哪些,每个指令的用途 文本类操作的指令 条件指令 循环指令 涉及绑定的指令
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>文本类指令</title> <style type="text/css"> p { line-height: 21px; background-color: orange } </style> </head> <body> <div id="app"> <!-- html全局属性语法: 全局属性名="属性值" --> <p v-bind:title="title" a="a" b="b">你是p</p> <!-- v-model也是对文本操作的指令,操作的是表单元素的value文本 --> <input type="text" v-model="msg"> <!-- 采用文本指令后,页面标签的内容由vue实例控制,原来用于表示标签的文本均会被替换 --> <p>{{ msg }}</p> <!-- eg:原文本会被msg替换 --> <p v-text=‘msg‘>原文本</p> <!-- 可以解析带html标签的文本信息 --> <p v-html=‘msg‘></p> <!-- v-once控制的标签只能被赋值一次 --> <p v-once>{{ msg }}</p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> // 指令: 出现在html标签中可以被vue解析处理的全局属性 new Vue({ el: "#app", data: { title: "", msg: "message" } }) </script> </html>
<div id="app" v-cloak>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="js/vue-2.5.17.js"></script> <style type="text/css"> [v-cloak] { /*display: none;*/ } </style> </head> <body> <div id="app" v-cloak> {{ msg }} </div> </body> <!-- <script src="js/vue-2.5.17.js"></script> --> <script type="text/javascript"> new Vue({ el: "#app", data: { msg: "message" } }) </script> </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>v-bind</title> <style type="text/css"> .abc { background-color: red } </style> </head> <body> <div id="app"> <!-- v-bind: --> <!-- 该指令 绑定 的是属性(html标签的全局属性) --> <!-- 绑定后的属性的属性值可以由变量控制 --> <p v-bind:abc="abc"></p> <!-- 绑定后 操作单一变量 --> <p v-bind:title="t1">p1p1p1p1p1p1p1</p> <!-- 绑定后 操作普通字符串 --> <p v-bind:title="‘t2‘">p2p2p2p2p2p2p2</p> <!-- 多类名 单一变量操作 --> <p v-bind:class="t3">p3p3p3p3p3p3p3</p> <p v-bind:class="[t4, tt4]">p4p4p4p4p4p4</p> <!-- 绑定class的{}语法 {key: value} key就是实际的类名,value是该类名的显隐(true就是起作用,false就是不起作用) --> <p v-bind:class="{abc: false}">p5p5p5p5p5p5</p> <p v-bind:class="{abc: t5}" v-on:click="fn">p5p5p5p5p5p5</p> <!-- class的[] {} 结合使用 --> <!-- class的值为p6 pp6, t6 tt6是值为true|false的变量,控制p6 pp6是否起作用 --> <p v-bind:class="[{p6: t6}, {pp6: tt6}]">p6p6p6p6p6p6p6p6</p> <!-- v-bind操作class --> <!-- [a, b] a,b为变量,对其赋值的是class的具体值 --> <!-- eg: a:active b:red => class="active red" --> <!-- {a: b} a为class值, b为值为true|false的变量,控制a的显隐 --> <!-- eg: b:true => class="a" --> <!-- eg: b:false => class="" --> <!-- v-bind:指令可以简写 : --> <p :class="‘simple‘">简写</p> <!-- 操作style --> <!-- style一般都是多条样式 --> <div :style="div_style"></div> <div :style="{width: ‘100px‘, height: ‘100px‘, backgroundColor: ‘blue‘}"></div> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el:"#app", data: { abc: "ABC", t1: "p1的title", t3: "p pp", t4: "p", tt4: "pp", t5: false, t6: true, tt6: true, div_style: { width: "200px", height: "200px", backgroundColor: "cyan" } }, methods: { fn () { this.t5 = !this.t5; } } }) </script> </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>v-on指令</title> <style type="text/css"> p { width: 100px; height: 100px; background-color: orange } </style> </head> <body> <div id="app"> <!-- v-on: 指令 --> <!-- 简写: @ --> <!-- 绑定的是事件,操作的是事件对应的方法名 --> <p @click="fn1"></p> <!-- 直接绑定方法名,不会携带自定义参数,但回调时能取到事件参数ev --> <p @click="fn2"></p> <!-- 带()的方法绑定,只传自定义参数,回调时只能取到自定义参数,事件参数ev丢失 --> <p @click="fn3(10)"></p> <!-- 带()的方法绑定,传入自定义参数同时,显式传入事件$event,回调时可以取到自定义参数及事件参数ev --> <p @click="fn4($event, 10, 20)"></p> <p @click="fn5(10, $event, 20)"></p> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: "#app", methods: { fn1: function () { console.log("click event"); }, fn2 (ev) { console.log(ev); }, fn3 (num) { console.log(num); }, fn4 (ev, n1, n2) { console.log(ev); console.log(n1); console.log(n2); }, fn5 (n1, ev, n2) { console.log(ev); } } }) </script> </html>
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>v-model</title> </head> <body> <div id="app"> <form action=""> <!-- 数据的双向绑定 --> <!-- v-model绑定的是value,所以省略 --> <input type="text" v-model="val1" name="usr"> <textarea v-model="val1"></textarea> <p v-text="val1"></p> <!-- 单一复选框 --> <!-- val2值为true|false的变量,控制单选框是否被选中 --> <!-- --> <input type="checkbox" v-model="val2" name="ck1"> <!-- val3值为自定义"选中"|"未选中",控制单选框是否被选中 --> <!-- 选中状态,提交给后台可以对应的value为on,为选中状态,不向后台提交value值 --> <input type="checkbox" v-model=‘val3‘ true-value="选中" false-value="未选中" name="ck2" /> <!-- 多复选框 --> <!-- 多个复选框的v-model绑定一个变量 --> <!-- 该变量为数组数据,存放的是复选框的value值(value值必须明确) --> <!-- 出现在数组中的value值对应的复选框默认为选中状态 --> <div> 篮球<input type="checkbox" value="lq" v-model="val4" name="ck3"> 足球<input type="checkbox" value="zq" v-model="val4" name="ck3"> 乒乓球<input type="checkbox" value="ppq" v-model="val4" name="ck3"> </div> <!-- 多单选框 --> <!-- 多个单选框的v-model绑定一个变量 --> <!-- 变量值为多个单选框中一个的value值,则该单选框为默认选中状态 --> <div> 男:<input type="radio" value="男" v-model=‘val5‘ name="sex" /> 女:<input type="radio" value="女" v-model=‘val5‘ name="sex" /> </div> <button type="submit">提交</button> </form> </div> </body> <script src="js/vue-2.5.17.js"></script> <script type="text/javascript"> new Vue({ el: "#app", data: { val1: "", val2: false, val3: "选中", val4: [‘lq‘, ‘ppq‘], val5: "女", } }) </script> </html>
标签：angular val 获取 调用 react 信息 action als com
原文地址：https://www.cnblogs.com/di2wu/p/10089852.html
