1688做网站需要多少钱,网站建设后预期推广方式,网络科技有限公司网站,网站跨机房建设方案语法规则
前端渲染 渲染有几种方式#xff1a;原生js、js模板、Vue模板语法
原生js
使用字符串拼接
js模板语法
Vue.js 模板语法概述
Vue.js 是一个用于构建用户界面的渐进式框架#xff0c;其模板语法非常灵活和直观。Vue 的模板语法基于 HTML#xff0c;可以通过指令… 语法规则
前端渲染 渲染有几种方式原生js、js模板、Vue模板语法
原生js
使用字符串拼接
js模板语法
Vue.js 模板语法概述
Vue.js 是一个用于构建用户界面的渐进式框架其模板语法非常灵活和直观。Vue 的模板语法基于 HTML可以通过指令、插值和特殊属性来实现数据绑定和事件处理。以下是 Vue.js 2 的模板语法的主要概念和示例。
1. 插值Interpolation
插值用于在模板中显示数据可以使用双大括号 {{ }} 进行文本插值或者使用 v-bind 进行属性插值。
div idappp{{ message }}/pp v-bind:titletitleHover to see the title/p
/divscript
new Vue({el: #app,data: {message: Hello, Vue!,title: This is a title}
})
/script2. 指令Directives
指令是带有 v- 前缀的特殊特性用来在模板中做响应式数据绑定。常用指令包括 v-if, v-for, v-show, v-model, v-bind, v-on 等。
条件渲染v-if, v-else-if, v-else
div idappp v-ifseenNow you see me/pp v-elseNow you dont/p
/divscript
new Vue({el: #app,data: {seen: true}
})
/script列表渲染v-for
div idappulli v-foritem in items :keyitem.id{{ item.text }}/li/ul
/divscript
new Vue({el: #app,data: {items: [{ id: 1, text: Item 1 },{ id: 2, text: Item 2 },{ id: 3, text: Item 3 }]}
})
/script事件处理v-on
div idappbutton v-on:clicksayHelloClick me/button
/divscript
new Vue({el: #app,methods: {sayHello: function() {alert(Hello, Vue!);}}
})
/script双向绑定v-model
div idappinput v-modelmessage placeholderEdit mepMessage is: {{ message }}/p
/divscript
new Vue({el: #app,data: {message: Hello, Vue!}
})
/script3. 修饰符Modifiers
修饰符是以半角句号 . 指明的特殊后缀用于指出一个指令应该以特殊方式绑定。例如.prevent, .stop, .capture, .self, .once, .native, .number, .trim。
div idappform v-on:submit.preventonSubmitbutton typesubmitSubmit/button/form
/divscript
new Vue({el: #app,methods: {onSubmit: function() {alert(Form submitted!);}}
})
/script4. 计算属性和侦听器
计算属性用来对模板中复杂逻辑进行计算并返回结果类似于 data 属性但会基于其依赖项缓存结果。
div idapppReversed message: {{ reversedMessage }}/p
/divscript
new Vue({el: #app,data: {message: Hello, Vue!},computed: {reversedMessage: function() {return this.message.split().reverse().join();}}
})
/script侦听器用于监听数据属性的变化并执行相应的操作。
div idappp{{ message }}/p
/divscript
new Vue({el: #app,data: {message: Hello, Vue!},watch: {message: function(newVal, oldVal) {console.log(Message changed from, oldVal, to, newVal);}}
})
/script以上是 Vue.js 2 模板语法的基本介绍和一些示例代码。这些概念和指令使得 Vue.js 非常灵活和易于使用适用于各种规模的应用开发。
插值表达式指令事件绑定属性绑定样式绑定分支循环结构
指令
什么是指令
什么是自定义属性指令的本质就是自定义属性指令的格式以v-开始比如V-cloak
v-clock指令用法
在频繁刷新的时候可能会出现插值表达式造成用户体验不好
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css[v-clock]{display:none;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv v-clock{{msg}}/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script// v-clock指令用法// 1.提供样式// [v-clock]{// display:none;// }// 2.在插值表达式所在的标签添加v-cloak指令var vm new Vue({el:#app,data:{msg:HelloWord}});
/script
/body
/html
使用v-clock就可以不显示插值表达式刷新页面直接出来数据 背后原理
先通过样式隐藏内容在内存中进行值的替换替换好之后在显示最终的结果。
v-text 纯文本信息 v-html(容易遭遇跨站脚本攻击) v-pre 填充原始信息 v-once:如果显示的信息后期不需要再修改可以使用可以提高性能。 v-model 双向绑定
MVVM设置思想
M(model) V(view) VM(View-Model) 重点是双向绑定
事件绑定
v-on指令语法 当然因为经常使用还提供一种简写方法 当然在vue中我们可以给时间绑定一个方法写在methods里面
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css[v-clock]{display:none;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv{{num}}/divdivbutton v-on:clicknum增加/buttonbutton clicknum点击1/buttonbutton clickhandle点击1/buttonbutton clickhandle()点击1/button/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{num:0},methods:{handle:function (){//这里的this是vue的实例对象console.log(this)this.num}}});
/script
/body
/html
事件参数传递 1.如果时间直接绑定函数名称那末默认会传递事件对象作为时间函数的第一个函数 2.如果事件绑定函数调用事件对象必须作为最后一个参数显示传递必须对象名称必须$event button clickhandle($event)点击1/button事件修饰符 按键修饰符 自定义按键修饰符
全局config.keyCodes对象 Vue.config.keyCodes.f1 112; 自定义按键修饰符名字是自定义的但是对应的值必须是按键对应event对象中keyCode值 Vue.config.keyCodes.aaa 65
Vue动态处理属性
v-bind指令用法 跳转 缩写形式 跳转 !DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css[v-clock]{display:none;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappa v-bind:hrefurl百度/abutton clickhandle/button//v-model事件双向绑定其实就是使用了v-bind:value,和inputdiv{{msg}}/divinput typetext v-bind:valuemsg inputhandle
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{url:http://www.baidu.com,msg:hello},methods:{handle:function (event){//修改url地址this.urlhttps://www.imooc.com/;this.msg event.target.value;}}});
/script
/body
/html
样式绑定
控制类名
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css.active{border: 1px solid red;width: 100px;height: 100px;}.error{background-color: orange;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv v-bind:class{active: isAcrive,error: isError}/divbutton clickhandle切换/button
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{url:http://www.baidu.com,msg:hello,isAcrive:true,isError:true},methods:{handle:function (){//控制isActive在true和false之间切换this.isAcrive !this.isAcrive;}}});
/script
/body
/html style样式处理 分支循环结构
v-ifv-elsev-else-fiv-show
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css[v-clock]{display:none;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv v-ifscore90优秀/divdiv v-else-ifscore90score80良好/divdiv v-ifscore80score60一般/divdiv v-else比较差/divdiv v-showflag11/divbutton clickhandle取反/button
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{score:76,flag:false},methods:{handle:function (){this.flag !this.flag}}});
/script
/body
/html
循环结构 在Vue中如果有对象遍历最好加上key这样的话就不会报错唯一的key
!DOCTYPE html
html langen
headmeta charsetUTF-8titleVue/titlestyle typetext/css[v-clock]{display:none;}/stylemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv水果列表/divulli v-foritem in fruits{{item}}/lili v-for(item,index) in fruits{{item ____ index}}/li/ul
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{fruits:[apple,organg,banana]},methods:{}});
/script
/body
/html Vue的常用特性
表单操作自定义指令计算属性过滤器监听器生命周期
表单操作
表单修饰符
number:转化为数值trim:去掉开始和结尾的空格lazy将input时间切换为change事件
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappinput typetext v-model.numberageinput typetext v-model.trimtextinput typetext v-model.lazymsgdiv{{msg}}/divbutton clickhandle点击/button
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{age:,text:,msg:},methods:{handle:function (){console.log(this.age1)console.log(this.text)}}})
/script
/body
/html
自定义指令
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappinput typetext v-focus
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptVue.directive(focus,{inserted:function (el){//el表示指令绑定的元素el.focus();}})var vm new Vue({el:#app,data:{},methods:{}})
/script
/body
/html
inserted是钩子函数当dom绑定的时候使用运行
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappinput typetext v-colorsmsg
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script typetext/javascript//自定义指令带参数Vue.directive(colors,{bind:function (el,bind){el.style.backgroundColor bind.value.color;//通过携带参数来控制指令的一些具体行为}});var vm new Vue({el:#app,data:{msg:{color:orange}},methods:{}})
/script
/body
/html
局部指令
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappinput typetext v-colorsmsginput typetext v-focus
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script typetext/javascript//自定义指令带参数var vm new Vue({el:#app,data:{msg:{color:orange}},methods:{},directives:{colors:{bind:function (el,bind){el.style.backgroundColor bind.value.color;//通过携带参数来控制指令的一些具体行为}},focus:{inserted:function (el){el.focus();}}}})
/script
/body
/html
局部指令应用范围是有所限制的全局指令是没有限制的
计算属性computed
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv{{msg}}/divdiv{{reversString}}/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{msg:Hello },methods:{},//计算属性让模板变得更加简单computed:{reversString:function (){return this.msg.split().reverse().join()}}})
/script
/body
/html
计算属性computed和methods方法存在什么差异 ** 缓存特性在比较耗时的计算节省性能计算属性他是基于依赖来做缓存的当发布存在缓存机制。
计算属性依赖data
侦听器 数据变化时异步或者开销比较大
侦听器用法 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdivspan名/spanspaninput typetext v-modelfirstName/span/divdivspan名/spaninput typetext v-modellastName/divdiv{{msg}}/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
scriptvar vm new Vue({el:#app,data:{firstName:Jim,lastName:Green,msg:},watch:{firstName: function (val){this.msg val this.lastName;},lastName: function (val){this.msg this.firstName val;}}})
/script
/body
/html
监听器属性的方法必须和数据里面的方法名称一致这样的监听才可以实现
监听器应用场景
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdivspan用户名/spanspaninput typetext v-model.lazyuname/spanspan{{tip}}/span/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script//1.采用监听器用户名称变化//2.调用后台接口验证//3.根据验证结果调整提示信息var vm new Vue({el:#app,data:{uname:,tip:},methods:{checkName:function (uname){//调用接口但是可以使用定时任务方式模拟接口调用var that this;setTimeout(function (){if (uname admin){that.tip 用户名存在请更换一个;}else{that.tip 用户名可以使用;}},2000)}},watch:{uname:function (val){//调用后台接口验证用户名合法性this.checkName(val);//修改提示信息this.tip 正在验证。。。;}},})
/script
/body
/html
过滤器
作用格式化数据比如将字符串格式化到首字母大写将日期格式化为指定的格式等。
自定义过滤器 !DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappinput typetext v-modelmsgdiv{{ msg | upper}}/divdiv{{msg | upper | lower}}/divdiv :abcmsg| upper测试数据/div/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script//过滤器// Vue.filter(upper,function (val){// return val.charAt(0).toUpperCase()val.slice(1);// });// Vue.filter(lower,function (val){// return val.charAt(0).toLowerCase()val.slice(1);// });var vm new Vue({el:#app,data:{msg:},filters:{upper: function (val){return val.charAt(0).toUpperCase()val.slice(1);}}});
/script
/body
/html
带参数的过滤器
!DOCTYPE html
html langen
headmeta charsetUTF-8titleTitle/titlemeta nameviewport contentwidthdevice-width, initial-scale1.0
/head
body
div idappdiv{{date | format(yyyy-MM-dd)}}/div
/div
script srchttps://cdn.jsdelivr.net/npm/vue/dist/vue.js/script
script//过滤器Vue.filter(format,function (val,arg){if (arg yyyy-MM-dd){var ret ;ret val.getFullYear()-(val.getMonth()1) - val.getDate();console.log(ret)return ret;}console.log(1)})var vm new Vue({el:#app,data:{date:new Date()},});
/script
/body
/html
生命周器
主要阶段
挂载(初始化相关属性) beforeCreatecreatedbeforeMountmounted 更新元素或组线的变更操作 beforeUpdateupdated 销毁销毁相关属性 beforeDestroydestroyed Vue实例产生会经过8个生命周期
Vue中对于数组的新概念
变异方法修改原始数据
push()pop()shift()unshift()splice()sort()reverse()
替换数组形成新的数组
filter()concat()slice()
变异方法都会影响到数组的原始数据替换方法不会影响到数组的原始数据他会形成一个新的数组。
修改响应式数据
Vue.set(vm.items,indexOfltem,newValue)vm.$set(vm.items,indexOfItem,newValue)
1.参数一表示要处理的数组名称 2.参数2表示要处理的数组索引 3.参数3表示要处理的数组的值
