中山建公司网站,杭州品牌推广,全球最大的设计网站,centos7.2 wordpress目录 一,模板基础 1.模板插值
#xff08;1#xff09;基础插值
#xff08;2#xff09;HTML代码插值
#xff08;3#xff09;标签属性插值
2.模板指令
#xff08;1#xff09;定义
#xff08;2#xff09;指令参数
二.条件渲染
1.使用v-if指令渲染
2.使…目录 一,模板基础 1.模板插值
1基础插值
2HTML代码插值
3标签属性插值
2.模板指令
1定义
2指令参数
二.条件渲染
1.使用v-if指令渲染
2.使用v-show指令渲染
三.循环渲染
1.v-for指令
2.v-for指令的高级用法
四.实战 一,模板基础 1.模板插值
1基础插值 用法模板插值是Vue中基础的模板用法一般在HTML的标签中用“{{}}”进行变量插值其可以将当前组件中定义的变量的值插入指定位置并且这种插值会默认实现绑定的效果当我们修改变量的值时其也可以同步反馈到页面的渲染上
例如一个基础的Vue应用
!DOCTYPE html
html langen
headmeta charsetUTF-8
!--导入Vue--script srchttps://unpkg.com/vuenext/scripttitleTitle/title
/head
body
div styletext-align: center idApplicationh1{{count}}/h1button v-on:clickclickButtonclick/button
/div
scriptconst App{data(){return{count:0}},methods:{clickButton(){this.countthis.count1}}}Vue.createApp(App).mount(#Application)
/script
/body
/html
效果 当我们点击按钮时次数累加 一般情况是某些组件的渲染是由变量控制的如果我们想让它一旦渲染后就不能够再被修改这可以使用v-once指令实现被这个指令设置的组件在进行变量插值时只会插值一次
如果将上面的代码改为如下后无论怎么点击按钮标题都不改变
h1 v-once这里的渲染内容不会改变{{count}}/h1
2HTML代码插值 还有如果要插入的文本为一段HTML代码时直接使用双括号时就不能实现效果双括号会将里面的变量解析成纯文本写的代码什么样渲染时就渲染什么样
例如上面的例子定义App的数据
插值是一个HTML代码 data(){return{count:0,countHTML:span stylecolor: #FF00000/span}}
插值位置 h1{{countHTML}}/h1
再运行后输出纯文本了 效果不是我们想的对于HTML代码的插值需要用v-html指令完成 h1模板内容span v-htmlcountHTML/span/h1效果 3标签属性插值 对于标签属性的插值双括号同样不好使而是需要使用v-bind指令
例如
h1 v-bind:idtest属性插值{{count}}/h1
定义一个CSS样式 #h1{color: blue;}
然后在data中添加一个名为test的Vue组件属性 data(){return{count:0,countHTML:span stylecolor: #FF00000/span,test:h1}}
运行代码后之前定义的count插值变量得到了一个CSS属性h1 2.模板指令
1定义 本质上Vue中的模板指令也是HTML属性标签其通常由前缀“v-”开头例如之前看到的v-onv-htmlv-bind等。某些特殊的Vue指令还可以指定参数参数和指令使用冒号进行分隔例如
v-bind:style
v-on:click
2指令参数 还有就是指令的参数本身也可以是动态的想换就换例如定义一个区分id选择器和类选择器的组件样式通过修改参数prop的值实现id选择器和类选择器之间的转换
!DOCTYPE html
html langen
headmeta charsetUTF-8
!--导入Vue--script srchttps://unpkg.com/vuenext/scripttitleTitle/titlestyle#h1{color: blue;}.h1{color: #3e8e41;}/style
/head
body
div styletext-align: center idApplicationh1模板内容span v-htmlcountHTML/span/h1h1 v-bind:idtest属性插值{{count}}/h1!--prop是可变参数--h1 v-bind:[prop]name v-ifshow标题/h1button v-on:clickclickButtonclick/button
/div
scriptconst App{data(){return{count:0,countHTML:span stylecolor: #FF00000/span,test:h1,show:true,prop:class, //prop:idname:h1}},methods:{clickButton(){this.countthis.count1}}}Vue.createApp(App).mount(#Application)
/script
/body
/html
当参数prop是class时 当参数prop是id时 实现了通过参数prop改变选择器类型
3语法糖 语法糖是指在不影响功能的情况下添加某些方法实现同样的效果说白了就是缩写Vue的v-bind和v-on是比较常用的指令使用它们都有自己的语法糖。 对于v-bind指令可以省略v-bind直接用冒号“”例如
a v-bind:hrefurl链接/a
img v-bind:srcimgUrl
!--缩写为--
a :hrefurl链接/a
img :srcimgUrl 对于v-on指令可以直接用“”来缩写例如
button v-on:clickclick点击/button
!--缩写为--
button clickclick点击/button 二.条件渲染 条件渲染是Vue控制HTML页面渲染的方式之一一般通过v-if和v-show指令来实现
1.使用v-if指令渲染 简单使用
h1 v-ifbooleantitle/h1 上面的代码中boolean变量可以是布尔值有可以是条件语句只有当boolean变量的值为真时或某个条件为真时当前标题元素才会被渲染同时if关键字还可以和else关键字结合使用组成if-else块
h1 v-ifbooleantitle/h1
p v-else如果不显示title就显示段落/p 注意的是v-else要紧接v-if使用才能构成if-else块例如下面的代码就会出错
h1 v-ifbooleantitle/h1
h1不构成if-else块/h1
p v-else如果不显示title就显示段落/p 在v-if和v-else之间还可以插入任意多的v-else-if来实现多分支渲染例如
h1 v-ifscore100满分/h1
h1 v-else-ifscore80score100优秀/h1
h1 v-else-ifscore80score60及格/h1
h1 v-else不及格/h1 如果想通过通过标签控制多个标签元素有如下两种实现方法
1使用div标签对要进行控制的元素进行包装
div v-ifboolean
p1/p
p2/p
p3/p
p4/p
/div
2使用template标签对元素进行分组
template v-ifbooleanpa/ppc/ppb/ppd/p
/template 它们都实现同时控制多个标签元素的渲染只不过div标签不是也会被渲染出来而templa标签则不会被渲染出来但其内控制的标签默认属性displaynone不显示出来
2.使用v-show指令渲染 v-show指令的基本用法和v-if类似不同的是v-show并不支持template模板同样不可以和v-else结合使用更加扯淡的是v-show无论条件的真假它都显示v-show的渲染逻辑只是一种视觉上的渲染它通常只是通过简单的切换CSS样式中的display属性来实现展示效果
简单使用
h1 v-showbooleantitle/h1 三.循环渲染 循环渲染一般是用来渲染列表这一类组件
1.v-for指令 在Vue中v-for指令可以将一个数组中的数据渲染为列表视图数组的设置语法格式
item in list
!--或--
item of list
类似于python中数组的语法一个临时变量item循环迭代数组list
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8
!--导入Vue--script srchttps://unpkg.com/vuenext/scripttitleTitle/title
/head
body
divdiv idApplicationdiv v-foritem in list{{item}}/div/div
/div
script
const App{data(){return{list:[1,2,3,5,6,7]}}
}
Vue.createApp(App).mount(#Application)
/script
/body
/html
渲染结果 列表也可以是键值对我们也可以获取列表的索引
!DOCTYPE html
html langen
headmeta charsetUTF-8
!--导入Vue--script srchttps://unpkg.com/vuenext/scripttitleTitle/title
/head
body
divdiv idApplicationdiv v-for(key,value,index) in list{{index}}-{{value}}:{{key}}/div/div
/div
script
const App{data(){return{list:{name:hello,age:time,school:hello,title:world}}}
}
Vue.createApp(App).mount(#Application)
/script
/body
/html
渲染效果 2.v-for指令的高级用法 v-for指令在渲染列表时当我们调用如下这些函数对列表数据对象进行更新时视图也会对于的更新函数有
push() //向列表尾部追加一个元素
pop() //删除列表尾部的一个元素
unshift() //向列表头部插入一个元素
shift() //删除列表头的一个元素
splice() //对列表进行操作
sort() //对列表进行排序操作
reverse() //对列表进行逆序例如
!DOCTYPE html
html langen
headmeta charsetUTF-8
!--导入Vue--script srchttps://unpkg.com/vuenext/scripttitleTitle/title
/head
body
divdiv idApplicationdiv v-forkey in list{{key}}/divbutton clicksortsort/buttonbutton clickreversereverse/buttonbutton clickpushpush/buttonbutton clickpoppop/buttonbutton clickshiftshift/buttonbutton clickunshiftunshift/buttonbutton clicksplicesplice/button/div
/div
script
const App{data(){return{list:[3,5,2,5,1,2,8,7],}},methods:{!--原数据修改--splice(){this.list.splice(1,1)},!--头部删除--shift() {this.list.shift()},!--头部插入--unshift(){var numparseInt(Math.random()*10)this.list.unshift(num)},!--尾部删除--pop(){this.list.pop()},!--排序--sort(){this.list.sort()},!--逆序--reverse(){this.list.reverse()},!--尾部追加--push(){var numparseInt(Math.random()*10)this.list.push(num)}}
}
Vue.createApp(App).mount(#Application)
/script
/body
/html
效果点击各个按钮实现对于的操作 四.实战 实现一个简单的待办任务列表应用其可以展示当前未完成的任务项也可以添加新的任务以及删除以及完成的任务
看码
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlescript srchttps://unpkg.com/vuenext/script
/head
body
div idApplication!--输入框元素用来新建待办任务--form submit.preventaddTaskspan新建任务/spaninput v-modeltaskText placeholder请输入任务.../button添加/button/form!--有序列表--olli v-for(item,index) in todos{{item}}button clickremove(index)删除任务/buttonhr//li/ol
/div
scriptconst App{data(){return{//待办任务列表数据todos:[],//当前输入的待办任务taskText:}},methods:{//添加一条待办任务addTask(){//判断输入框是否为空if(this.taskTest.length0){alert(请输入任务)return}this.todos.push(this.taskText)this.taskText},remove(index){this.todos.splice(index,1)}}}Vue.createApp(App).mount(#Application)
/script
/body
/html
效果
