Vue入门案例Day 01
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <span> {{title}} </span> <input type="text" v-model="title"/> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 绑定到div id='app' el:'#app', data:{ title:'hello vue' } }); </script> </html>
一个基础的Vue案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <!--在html被vue绑定的元素中 通过插值表达式来获取vue对象中的数据和方法--> 欢迎 年龄是{{age}}的{{name}} </div> <div id="app2"> <!--没绑定 不能用插值表达式--> 欢迎 年龄是{{age}}的{{name}} </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ // 大括号 js的model对象 json格式的对象 使用大括号包裹 里面放键值对 在js中键可以没有引号 多个键值对之间使用','分割 el:'#app',//element id选择器 该vue对象绑定在哪个div上 //数据哪里来 data:{//以后数据就是通过发送ajax请求来获得的 前后端 提供数据的 里面存放键值对 name:'牛子', age: 18 } }); </script> </html>
Vue对象的两个属性和认识插值表达式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>插值表达式</title> </head> <body> <div id="app"> <!--在html被vue绑定的元素中 通过插值表达式来获取vue对象中的属性和方法--> 我是个{{major}}<br/> {{[22,33,44,55,66] [1]}}<br/> {{{name:'牛子', age:20}.name}} <!--调用的是方法 需要有括号--> {{sayHi()}} </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', //data提供属性 data:{ major:'ass' }, methods:{//vue定义方法 //键方法名 值具体的方法 sayHi:function () { alert("HELLO ASS!") } } }) </script> </html>
插值表达式的用法和Vue定义方法
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-model</title> </head> <body> <div id="app"> <!--vue中的关键字 这些关键字都是作为html页面的标签中的属性 1. v-model 是将标签的value值与vue实例中的data属性值进行绑定 --> 请输入您的专业: <input type="text" v-model="major"/> ======================<br/> <!--在html被vue绑定的元素中 通过插值表达式来获取vue对象中的属性和方法--> 我是{{major}}专业<br/> {{[22,33,44,55,66] [1]}}<br/> {{{name:'牛子', age:20}.name}} <!--调用的是方法 需要有括号--> <!--{{sayHi()}}--> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', //data提供属性 data:{ major:'ass' }, methods:{//vue定义方法 //键方法名 值具体的方法 sayHi:function () { alert("HELLO ASS!") } } }) </script> </html>
初识v-model
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>插值表达式</title> </head> <body> <div id="app"> <!--vue中的关键字 这些关键字都是作为html页面的标签中的属性 1. v-model 是将标签的value值与vue实例中的data属性值进行绑定 --> <!--v-on通过配合具体的事件名 来绑定vue中定义的函数 不带括号不能传参数 带括号可以传参数--> 请输入您的专业: <input type="text" @input="changeMajor"/> ======================<br/> <!--在html被vue绑定的元素中 通过插值表达式来获取vue对象中的属性和方法--> 我是个{{major}}<br/> {{[22,33,44,55,66] [1]}}<br/> {{{name:'牛子', age:20}.name}} <!--调用的是方法 需要有括号--> <!--{{sayHi()}}--> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', //data提供属性 data:{ major:'ass', // changeMajor:'hello'不能重名 }, methods:{//vue定义方法 //键方法名 值具体的方法 sayHi:function () { alert("HELLO ASS!") }, changeMajor:function (event) { //事件对象的value值 //在响应函数里 可以指明使用event内置的参数对象 该对象表示当前事件 //可以通过event.target.value来获得当前事件对象的value的值 // console.log(event.target.value) this.major = event.target.value; // this的用法 // this表示当前vue对象 new Vue() 可以通过"this."来调用当前vue对象的属性和方法 // v-on可以简写 // v-on:input="" == @input="" } } }) </script> </html>
初识v-on
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-bind</title> </head> <body> <div id="app"> <!--插值表达式语法格式{{vue的内容}} 注意 插值表达式不能写在html的标签中 不能作为属性的值的部分--> {{link}} <a v-bind:href="link">百度</a> <!--<a href="{{link}}">百度</a>--> <!--我们知道差值表达式是不能写在html的标签的属性内的 如果一定要用vue中的属性作为html标签的属性的内容 就可以通过v-bind进行属性绑定--> <!-- v-bind:href="" == :href="" --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ link:'http://www.baidu.com' } }) </script> </html>
初识v-bind
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-once</title> </head> <body> <div id="app"> <!--只拿一次数据 此时该标签中的插值表达式 只获取一次数据 之后数据的变化不影响此插值表达式的值--> <p v-once> {{link}} </p> <input type="text" v-model="link"/> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ link:'http://www.baidu.com' } }) </script> </html>
初识v-once
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>v-html/v-text</title> </head> <body> <div id="app"> <!--只拿一次数据 此时该标签中的插值表达式 只获取一次数据 之后数据的变化不影响此插值表达式的值--> <p v-once> {{link}} </p> <input type="text" v-model="link"/> <br/> <!-- v-html会将vue中的属性的值作为html的元素来使用 v-text会将vue中的属性的值只作为纯文本来使用 --> <span v-html="mylink"></span> <span v-text="mylink"></span> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ link:'http://www.baidu.com', mylink:'<a href="http://www.baidu.com">百度</a>' } }) </script> </html>
v-html/v-text
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue 事件</title> </head> <body> <!--事件的参数传递 分成三个部分 设参： 传参： 接参： --> <div id="app"> {{count > 10 ? '大于10' : '不大于10'}} {{count}} <button type="button" @click="addbtn(1)">增加</button> <button type="button" @click="deletebtn(1)">减少</button> <input type="text" v-model="mystep"> <p v-on:mousemove="mymouse"> 666我的宝贝 {{x}} <br> {{y}} <!--<span @mousemove="mystopmouse">停止鼠标移动的事件</span>--> <span @mousemove.stop>停止鼠标移动的事件</span> </p> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data:{ count:0, mystep:1, x:0, y:0 }, methods:{ addbtn:function (step) { this.count += this.mystep - 0; // this.count += step; }, deletebtn:function (step) { this.count -= this.mystep - 0; // this.count -= step; }, mymouse:function (event) { this.x = event.clientX; this.y = event.clientY; console.log(event); }, mystopmouse:function (event) { event.stopPropagation() } } }) </script> </html>
vue 事件
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue 事件修饰符</title> </head> <body> <!-- vue的事件修饰符 @click.stop 阻止点击事件 @mousemove.stop 阻止鼠标移动 @keyup.enter enter键弹起时 ......文档 --> <div id="app"> <input type="text" @keyup.enter="mykeyupfn"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data: { }, methods:{ mykeyupfn:function () { console.log("hello ass") } } }) </script> </html>
vue 事件修饰符
<!DOCTYPE html> <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>vue 怎么改变内容</title> </head> <body> <div id="app"> {{count}} {{result}} <button type="button" @click="addbtnfn(2)">增加</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:"#app", data: { count:0, result:'' }, methods:{ addbtnfn:function (step) { this.count += step; this.result = this.count > 10 ? '大于10' : '不大于10' // this.count += step; } } }) </script> </html>
vue 怎么改变内容
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计算属性</title> </head> <body> <div id="app"> {{getCurrentTime()}} <br/> {{getCurrentTime1}} <!--{{getCurrentTime1()}} 报错--> <!-- 计算属性的重点突出在 属性 两个字上 属性是名词 首先它是个 属性 其次这个属性有 计算 的能力 计算是动词 这里的 计算 就是个函数 简单来说 它就是一个能够将计算结果缓存起来的属性(将行为转换成了静态的属性) 仅此而已 （类似缓存函数 提高效率--> <!--一些常用的函数 可以缓存起来 在调用时直接使用缓存中的过程（结果）以此来提高效率--> <!--computed 里虽然存放的是函数 但是调用时 computed里的东西是一个属性 所以我们在调用时不能使用() 因为()是在调用函数 而不是在调用属性--> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var v1 = new Vue({ el:'#app', methods:{ getCurrentTime:function () { return new Date(); } }, computed:{ getCurrentTime1:function () { return new Date(); } } }) </script> </html>
计算属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>watch用法 监控</title> </head> <body> <div id="app"> {{title}} <input type="text" v-model="title"> <!-- watch 监控属性 通过watch里给属性绑定函数 当属性的值发生变化时 该函数就会自动被调用 调用时可以接受两个参数 第一个参数是属性改变后的值 第二个参数是属性改变前的值 --> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> var v1 = new Vue({ el:'#app', data:{ title:"hello vue" }, watch:{ title:function (newValue, oldValue) { console.log(newValue + ":" + oldValue) } } }) </script> </html>
watch用法 监控
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue改变样式</title> <style> .mydiv{ width: 400px; height: 220px; background-color: gray; } .red{ background-color: red; } .yellow{ background-color: yellow; } .green{ background-color: green; } </style> </head> <body> <!--通过给html元素的class属性绑定vue中的属性值 得到样式的动态绑定--> <div id="app"> <div v-bind:class="{red:temp}" class="mydiv"></div> <div class="mydiv"></div> <div class="mydiv"></div> <button type="button" @click="temp = !temp">点</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ temp:false } }) </script> </html>
Vue改变样式
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue改变样式</title> <style> .mydiv{ width: 400px; height: 220px; background-color: gray; } .red{ background-color: red; } .yellow{ background-color: yellow; } .mywidth{ width: 450px; } .green{ background-color: green; } </style> </head> <body> <!--通过给html元素的class属性绑定vue中的属性值 得到样式的动态绑定--> <div id="app"> <div v-bind:class="{red:temp}" class="mydiv"></div> <hr/> <div :class="myClassStyle" class="mydiv"></div> <hr/> <div class="mydiv"></div> <button type="button" @click="temp = !temp">点</button> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ temp:false }, computed:{ myClassStyle:function () { return{ red:this.temp, mywidth:this.temp } } } }) </script> </html>
Vue改变样式
<!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Vue改变样式</title> <style> .mydiv{ width: 400px; height: 220px; background-color: gray; } .red{ background-color: red; } .yellow{ background-color: yellow; } .mywidth{ width: 450px; } .green{ background-color: green; } </style> </head> <body> <!--通过给html元素的class属性绑定vue中的属性值 得到样式的动态绑定--> <div id="app"> <div v-bind:class="{red:temp}" class="mydiv"></div> <hr/> <div :class="myClassStyle" class="mydiv"></div> <hr/> <div :class="mycolor" class="mydiv"></div> <button type="button" @click="temp = !temp">点</button> <input type="text" v-model="mycolor"> </div> </body> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> new Vue({ el:'#app', data:{ temp:false, mycolor:'green' }, computed:{ myClassStyle:function () { return{ red:this.temp, mywidth:this.temp } } } }) </script> </html>
Vue改变样式
浙公网安备 33010602011771号