规范12388举报网站建设管理,一小时学会网站建设,网站关键词提升,浙江网站建设方案目录 前言
一. Vue的基础语法
1.插值
1.1文本插值
1.2HTML插值
1.3属性插值
1.4Vue演示三元条件运算
2 指令
2.1ifelse指令#xff08;v-if/v-else-if/v-else#xff09;
2.2 v-for 指令
2.3 v-on指令(动态参数)
2.4知识点补充之v-if与v-show的区别 3.过…目录 前言
一. Vue的基础语法
1.插值
1.1文本插值
1.2HTML插值
1.3属性插值
1.4Vue演示三元条件运算
2 指令
2.1ifelse指令v-if/v-else-if/v-else
2.2 v-for 指令
2.3 v-on指令(动态参数)
2.4知识点补充之v-if与v-show的区别 3.过滤器
3.1局部过滤器
3.2 全局过滤器
4.计算属性与监听属性
4.1计算属性
4.2 监听属性
4.3区别总结 二.购物车案例 前言 Vue.js 的模板语法是一种声明式的、直观的方式来构建用户界面。它允许开发者将 DOM 结构与 Vue 实例的数据和行为进行绑定从而实现数据驱动的视图 一. Vue的基础语法
1.插值
1.1文本插值
文本插值就是利用最基础的插值表达式
div idapp{{msg}}
/div
然后将Vue实例中的数据属性的值动态显示在HTML元素中
new Vue({el:#app,data(){return {msg:hello Vue,}}})
1.2HTML插值
如果我们想将HTML代码插入到模板中而不是纯文本可以使用 v-html 指令
div idappp v-htmlmsg_html/p
/div 然后在data返回的值中定义一个msg_html,可以将html代码带入并展示效果
new Vue({el:#app,data(){return {msg_html:span stylecolor:pinkHello YU/span}}
})
效果演示 1.3属性插值
我们可以使用插值表达式绑定元素的属性例如class、id、src等等这里演示插入class值为了演示效果我们将等下要插入的class属性值添加样式
style typetext/css.cl{color:pink}
/style
然后在Vue实例返回的data值中定义一个msg_class
new Vue({el:#app,data(){return {msg_class:cl}}})
最后在HTML代码中对其进行属性插值
div idapp{{msg}}p v-htmlmsg_html/pp :classmsg_classHi YU/p/div
演示效果 1.4Vue演示三元条件运算
首先编写vue实例
new Vue({el:#app,data(){return {result:true}}})
在表达式中利用三元条件运算得出结果
p{{result? 很帅:一般}}/p
因为我们的在属性定义的是true所以结果为很帅 由此可得知表达式中支持三元条件运算 2 指令
2.1ifelse指令v-if/v-else-if/v-else
我们可以利用其指令制作一个分数评级器当我们在输入分数时判定相应的级别
首先在HTML代码中利用v-model双向绑定输入框中的数据再利用if-else进行判断展示不同内容
div idapppv-if/v-else-if/v-else/pinput v-modelscore/br /b v-ifscore 60不及格/bb v-else-ifscore 60 score90良好/bb v-else-ifscore 90 score 100优秀/bb v-else分数不准确/b/div
进行编写Vue实例
new Vue({el:#app,data(){return {score:69,}}})
我们可以自由在输入框输入分数进行评级 2.2 v-for 指令
我们可以根据数据源的内容多次渲染DOM元素以便动态显示列表、表格、或其他重复的内容
首先在Vue实例中定义数据源这里定义一个JSON数组
new Vue({el:#app,data(){return {user:[{name:YU,id:1},{name:sz,id:2},{name:lx,id:3},]}}})
然后在HTML代码中利用v-for指令拿到数据源中的属性值
div idapppv-for指令/pi v-fori,u in user{{i.name}}nbsp;/i/div
演示效果 v-for指令可以作用在很多元素中例如下拉框、多选框、单选框等等当数据需要循环获取到并展现在页面上时可以使用Vue中的v-for指令进行数据绑定 2.3 v-on指令(动态参数)
从2.6.0开始可以用方括号括起来的JavaScript表达式作为一个指令的参数
(1)首先在vue实例中默认定义一个参数然后写一个方法弹窗演示效果
new Vue({el:#app,data(){return {evname:click}},methods:{test(){alert(Hi Vue)}}})
(2) 然后在HTML代码中先将输入框中数据对data返回值进行绑定然后通过v-on进行动态传参当我们在输入框中输入不同的操作时传递不同的参数演示的效果也会不同
div idappinput v-modelevname/button v-on:[evname]test点我/button/div (3)演示效果 操作详解 当我们输入click时需要单击按钮弹出内容 输入dblclick时需要双击按钮弹出内容 输入不同参数进行的操作也不同 2.4知识点补充之v-if与v-show的区别
v-if 和 v-show 是Vue.js中两种常用的指令用于根据条件控制元素的显示和隐藏。它们之间有几个重要的区别 DOM 渲染方式 v-if当条件为真时DOM元素会被渲染到页面上当条件为假时DOM元素会从DOM树中移除。v-show无论条件是真还是假DOM元素始终会被渲染到页面上只是通过CSS的display属性控制其显示或隐藏。 初始渲染性能 v-if在初始渲染时如果条件为假该元素不会被渲染到DOM中因此初始渲染性能比v-show更好。v-show无论条件真假元素都会被渲染只是通过CSS的display属性控制其显示或隐藏初始渲染性能稍逊于v-if。 切换开销 v-if切换时会有DOM的创建和销毁可能会有较大的性能开销尤其在频繁切换时。v-show切换时只需要切换display属性性能开销较小。 适用场景 v-if适用于在条件不经常改变时或者条件依赖于异步操作结果的情况可以更好地利用DOM的性能优势。v-show适用于需要频繁切换显示/隐藏的情况例如对话框、菜单等可以减少DOM的重复渲染。 3.过滤器
3.1局部过滤器
创建Vue实例
new Vue({el:#app,filters:{fileterA:function(v){return v.substring(0,3)},fileterC:function(v,begin,end){return v.substring(begin,end)},},data(){return {msg:今天天气真好,}},methods:{}})
1局部过滤器基本使用
div idappp局部过滤器/p{{msg}}p局部过滤器基本使用/p{{msg | fileterA}}/div
2局部过滤器传参使用
div idappp局部过滤器/pp局部过滤器传参使用/p{{msg | fileterC(1,3)}}/div 演示结果 3.2 全局过滤器
我们在创建vue实例之前先引入js文件,后面调用格式化时间
1创建实例
new Vue({el:#app,data(){return {time:new Date()}},})
2创建全局过滤器
Vue.filter(fmtDateFilter, function (value) {return fmtDate(value);});
3HTML代码演示
div idappp局部过滤器/p{{msg}}p局部过滤器基本使用/p{{msg | fileterA}}p局部过滤器传参使用/p{{msg | fileterC(1,3)}}p全局过滤器/p{{time}}br /{{time | fmtDateFilter}}/div 4运行结果 通过运行结果我们可以发现全局过滤器对时间进行了格式化输出页面 4.计算属性与监听属性
4.1计算属性
计算属性用于根据依赖的数据属性计算派生的属性这些属性可以被视为响应式的当依赖数据变化时计算属性会自动重新计算
1创建Vue实例
new Vue({el:#result,data(){return{price:20,num:1};},computed: {subtotal:function() {return this.price* this.num }},})
2HTML演示
div idresultp计算属性/p单价input v-modelprice/数量input v-modelnum/小计{{subtotal}}/div
3演示效果 当我们的输入框中发生变化时会自动计算最后的总值通常被应用在购物车中
4.2 监听属性
监听属性主要用于在特定数据发生变化时执行自定义的操作例如异步请求或复杂的数据处理
1 Vue实例
new Vue({el:#result,data(){return{m:1000,km:1};},watch:{km:function(v){//v指被监听的属性this.m parseInt(v)*1000},m:function(v){this.km parseInt(v)/1000}},})
2HTML代码
div idresultp计算属性/p单价input v-modelprice/数量input v-modelnum/小计{{subtotal}}p监听属性/p米input v-modelm/千米input v-modelkm//div
3演示效果 当我们的其中一个值发生变化时另外一个绑定的值也会发生变化
4.3区别总结 监听属性适用于执行自定义的操作通常用于响应式地处理数据变化但不返回新的值。计算属性适用于计算派生的数据通常返回一个新的值当依赖数据变化时自动重新计算。计算属性的结果会被缓存只有在依赖数据变化时才会重新计算而监听属性没有缓存每次数据变化都会触发回调函数。 根据您的需求您可以选择使用监听属性或计算属性来处理组件中的数据变化。通常情况下如果您需要派生数据或计算新的属性值计算属性是更好的选择而如果您需要执行一些副作用或自定义操作监听属性更合适 二.购物车案例
当前购物车利用计算属性可以通过改变数量和单价小计和总计进行相应的变化
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0script srchttps://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js/scriptscript srchttps://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js/scripttitle购物车/titlestyletable {width: 100%;border-collapse: collapse;}table, th, td {border: 1px solid black;}th, td {padding: 10px;text-align: left;}input[typenumber] {width: 60px;}/style
/head
bodydiv idapp styletext-align: center;h1 styletext-align: center;购物车/h1divlabel foritem-name商品名称:/labelinput typetext iditem-name v-modelnewItemNamelabel foritem-price单价:/labelinput typenumber iditem-price v-model.numbernewItemPricelabel foritem-quantity数量:/labelinput typenumber iditem-quantity v-model.numbernewItemQuantitybrbrbutton clickaddItem添加到购物车/button/divtabletheadtrth商品/thth单价/thth数量/thth小计/thth操作/th/tr/theadtbodytr v-for(item, index) in cart :keyindextd{{ item.name }}/tdtdinput typenumber v-model.numberitem.price/tdtdbutton clickdecreaseQuantity(index)-/buttoninput typenumber v-model.numberitem.quantitybutton clickincreaseQuantity(index)/button/tdtd{{ item.price * item.quantity }}/tdtdbutton clickremoveItem(index)移除/button/td/tr/tbody/tablep stylefloat: right;总计: {{ total }}/p/div!-- script srchttps://cdn.jsdelivr.net/npm/vue2.6.14/script --scriptnew Vue({el: #app,data: {newItemName: ,newItemPrice: 0,newItemQuantity: 0,cart: []},methods: {addItem: function() {if (this.newItemName this.newItemPrice 0 this.newItemQuantity 0) {this.cart.push({name: this.newItemName,price: parseFloat(this.newItemPrice),quantity: parseInt(this.newItemQuantity)});this.newItemName ;this.newItemPrice 0;this.newItemQuantity 0;}},removeItem: function(index) {this.cart.splice(index, 1);},increaseQuantity(index) {this.cart[index].quantity;},decreaseQuantity(index) {if (this.cart[index].quantity 1) {this.cart[index].quantity--;}},},computed: {total: function() {return this.cart.reduce((acc, item) acc item.price * item.quantity, 0);}},computed: {total: function() {return this.cart.reduce((acc, item) acc item.price * item.quantity, 0);}},});/script
/body
/html运行效果 通过创建Vue实例对数据进行实时更新当我们在每次进行添加商品时对应的单价与数量进行计算每次发送变化时小计与总计也会自动更新
今天的分享到这里就结束了感谢各位大大的观看各位大大的三连是博主更新的动力感谢谢谢谢谢谢谢谢谢各位的支持
