Vue学习笔记

it2023-04-17 70

day1

准备工作功能快捷键Hello world程序Vue双向数据绑定Hello world程序实现数据双向绑定文本渲染Hello world程序实现文本渲染属性绑定指令绑定样式使用对象语法绑定样式使用三目运算符绑定样式直接绑定内联样式事件处理指令条件渲染指令+v-if+v-show+v-else+v-else-if指令遍历对象属性遍历数组元素+图片显示

准备工作

下载vscode；下载插件：

功能快捷键

自动生成html文件1：! （英文输入法下）打开浏览器：Alt + shift+ B

Hello world程序

<!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"> {{msg}} </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'hello,world' } }); </script> </body> </html>

易出错处：生成vue对象Vue，首字母必须大写

Vue双向数据绑定

动态生成网页消息

Hello world程序实现数据双向绑定

<!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"> </br> <input type="text" v-model="msg"> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'hello,world' } }); </script> </body> </html>

显示如下：

文本渲染

v-html：更新元素的innerHTMLv-text：更新元素的innerText

Hello world程序实现文本渲染

<!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"> {{msg}}</br> <input type="text" v-model="msg"> <p v-html="msg1"></p> <p v-text="msg2"></p> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ msg:'hello,world', msg1:'<h1>标题1</h1>', msg2:'<h2>标题2</h2>' } }); </script> </body> </html>

显示如下：注：{{}}是一种文本插值显示方法，若网络过慢或者js出错会将{{}}直接渲染到页面。使用v-text和v-html来渲染文本或者元素，避免出现将{{}}直接渲染到页面的错误。

属性绑定指令

v-bind：想让html标签中的属性，也能应用Vue中的数据，那么就可以使用vue中常用的属性绑定指令 <div id="app"> <div v-bind:title="msg">DOM元素属性绑定</div>  <div :title="msg">DOM元素属性绑定</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { msg:'Hello World!' } }); </script>

绑定样式

显示如下：

使用对象语法绑定样式

可以给v-bind:class 一个对象，也可以直接绑定数据里的一个对象，以动态地切换class。

<head> <style> .one{ color: red; } .two{ font-size: 48px; } </style> </head> <body> <div id="app"> <div :class="{one:oneActive,two:twoActive}">DOM元素的样式绑定</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm = new Vue({ el: '#app', data: { oneActive:true, twoActive:false } }); </script> </body>

使用三目运算符绑定样式

显示如下：

直接绑定内联样式

显示如下：

事件处理指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .one{ color: red; } .two{ color: blue; } </style> </head> <body> <div id="app"> {{msg}}</br> <input type="text" v-model="msg"> <p v-html="msg1"></p> <p v-text="msg2"></p> <div :class="className1">红色</div> <div :class="className2">蓝色</div> <div :class="userId%2==0?className1:className2">{{userId}}</div> <div :class="userId%2==1?className1:className2">{{userId}}</div> <div :style="{color:colorVal, fontSize:fontSizeVal1+'px'}">字体样式</div> <button @click="clickme">点击我</button> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ userId:1, msg:'hello,world', msg1:'<h1>标题1</h1>', msg2:'<h2>标题2</h2>', className1:'one', className2:'two', colorVal:'#0000ff', fontSizeVal:'24px', fontSizeVal1:'12' }, methods:{ clickme:function(){ this.fontSizeVal1++; console.log('click me!') } } }); </script> </body> </html>

显示如下：

条件渲染指令+v-if+v-show+v-else+v-else-if指令

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .one{ color: red; } .two{ color: blue; } </style> </head> <body> <div id="app"> {{msg}}</br> <input type="text" v-model="msg"> <p v-html="msg1"></p> <p v-text="msg2"></p> <div :class="className1">红色</div> <div :class="className2">蓝色</div> <div :class="userId%2==0?className1:className2">{{userId}}</div> <div :class="userId%2==1?className1:className2">{{userId}}</div> <div :style="{color:colorVal, fontSize:fontSizeVal1+'px'}">字体样式</div> <button @click="clickme">点击我</button> <div v-if="!isShow">我要显示出来</div> <div v-if="dayVal==1">星期一</div> <div v-else-if="dayVal==2">星期二</div> <div v-else-if="dayVal==3">星期三</div> <div v-else-if="dayVal==4">星期四</div> <div v-else-if="dayVal==5">星期五</div> <div v-else-if="dayVal==6">星期六</div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ userId:1, msg:'hello Vue.js', msg1:'<h1>标题1</h1>', msg2:'<h2>标题2</h2>', className1:'one', className2:'two', colorVal:'#0000ff', fontSizeVal:'24px', fontSizeVal1:'12', isShow:true, dayVal:6 }, methods:{ clickme:function(){ this.fontSizeVal1++; console.log('click me!') } } }) </script> </body> </html>

显示如下：

注：1. v-if是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 2. v-if是惰性的，只有当条件为true时才会渲染，如果条件为false则什么都不做 3. v-if有很高的切换开销，适用于条件不太容易改变的时候 v-show不管条件是true还是false都会进行渲染。并且只是简单地基于CSS 进行切换 v-show有很高的初始渲染开销，适用于非常频繁地切换

遍历对象属性

value 是遍历得到的属性值；key 是遍历得到的属性名；index 是遍历次序；这里的 key、index都是可选参数，如果不需要，这个指令其实可以写成 v-for=“value in user” <!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-for="(value, key) in userObj"> {{key}}--{{value}} </div> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ userObj:{ id:10001, name:'张三', sex:'男' } } }); </script> </body> </html>

显示如下：

遍历数组元素+图片显示

1.value 是遍历得到的元素； 2.index 是数组下标，这里的index 也是可选参数，如果不需要，这个指令其实可以写成v-for=“value in userArr”

<!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-for="(value, key) in userObj"> {{key}}--{{value}} </div> <ul> <li v-for="(value, index) in userObjArr"> <img :src="value.headUrl"/> {{index+1}}-{{value.id}}--{{value.name}}--{{value.sex}} </li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script> let vm=new Vue({ el:'#app', data:{ userObj:{ id:10001, name:'张三', sex:'男', headUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=759104360,1633806034&fm=26&gp=0.jpg' }, userObjArr:[ { id:10001, name:'张三', sex:'男', headUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=759104360,1633806034&fm=26&gp=0.jpg' }, { id:10002, name:'李四', sex:'男', headUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=759104360,1633806034&fm=26&gp=0.jpg' }, { id:10003, name:'吴冰', sex:'女', headUrl:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=759104360,1633806034&fm=26&gp=0.jpg' }] } }) </script> </body> </html>

显示如下：

最新回复(0)