前端渲染方式 原生js拼接字符串 使用前端模板引擎 使用vue特有的模板语 _
原生js拼接字符串 基本上就是将数据字符串的方式拼接到HTML标签中，前端代码风格大体如下所示： var date = d[i].date; var day = d[i].info.day; var night = d[i].info.night; _
使用前端模板引擎 script id = “abc” type=“text/html” {{if isAdmin}} h1{{title}}</h1 <ul {{each list as value i }} <li 索引 {i + 1}: {{value}} </li _ 5.模板语法概述 _ 插值表达式 _ 指令 . 事件绑定 . 属性绑定 . 样式绑定 . 分支循环结构
什么是指令? . 什么是自定义属性 . 指令本质就是自定义属性 . 指令的格式 : 以v-clock开始(v-开始)v-cloak指令用法 / 插值表达式存在问题 :“闪动” / j解决问题 : 使用v-cloak指令 问题原理 : 先隐藏 , 替换好值之后再显示最终的值 官网 : https://cn.vue.js.org/va/api/ _提供样式 [ v- cloak ]{ display : none; }3.3 双向数据绑定
什么是双向数据绑定? malow malow -----> 这里的变化会导致上面的内容跟着变化双向数据绑定分析 v-model指令用法 MVVM 设计思想. M (model) 模型V (view) 视图VM(View - Model) 视图模型 注意两个点 ： a. 事件监听 b. 模型绑定3,4 事件绑定 `1. Vue 如何处理事件
v-on 指令用法<input type = 'button v-on : click ='num++/>v-on 简写方式<input type = "button type = “button” @ click=‘num++’/>2.事件函数调用方式 _ 直接绑定函数名称 <button v-on:click=‘say’ HELLO </button -调用函数 say hi </button on
事件函数参数传递 普通参数和事件对象固定button v-on : click=‘say(“hi”,$event)’> Say hi</button on 事件绑定 . 参数传递 代码体验： var vm = new Vue({ el : ‘#app’, data: { num:0 }, methods:{ handle2:function(p,p1,event){ console.log(p,p1) console.log(event.target.innerHTML) this.num++; }, handle1 : function(event){ console.log(event,target,innerHTML) } } 1, 如果事件直接绑定函数名称，那么默认会传递事件对象作为事件 ，函数的第一个参数 如果事件绑定函数调用， 那么事件对象必须作为最后一个参数显示传递， 并且事件对象的名称必须是$event _ 3,4事件绑定事件修饰符stopv 阻止冒泡
<a v- on : click.stop='handle‘’>跳转</a
prevent 阻止默认行为
<a v - on : click.prevent = 'hamdle"> 跳转</a
/ 代码玩下
事件绑定 ： 事件修饰符
var vm = new Vue({
el: ‘#app’,
data: {
num:0
}
methods: {
handle0 : function(){
this.nu m++;
ent){
// 阻止冒泡
// event. stopPropagation();
}
},
handle2 : function(evnet){
// 阻止默认
// event. preventDefault();
使用修饰符时，顺序很重要， 相应的代码会以同样的顺序昌盛， 因此， 用
v - on : click.prevent.self 会阻止所有的点击 ， 而prevent只会阻止对元素自身的点击
按照文档练习， 可以连写
按键修饰符玩一下 ：
var vm = new Vue({
el：’ #ap ',
data : {
uname ； ‘’,
pwd: ‘’
},
mehods:{
handleSubmit:function(){
console.log(this,uname，this. pwd) 按键修饰符 . enter 回车键 <input v-on:keyup.enter = ‘submit’
delete 删除键
<inout v-on:keyup.delete =“handle”
代码走一波
事件绑定 - 按键修饰符
var vm = new Vue({
el : ‘#app’,
data : {
uname ：’’,
},
methods : {
handleSubmit: function(){
console.log(this.uname,this.pwd) 6 .自定义按键修饰符
全局 config.keyCodes 对象
Vue . config.keyCodes,f1 = 112
规则： 自定义按键修饰符名字是自定义的 ， 但是对应的值必须是按键对应event
代码验证
Vue. config,keyCodes.aaa = 65 var vm = new Vue({ el: "#app’, data: { info ： ‘’ }， mehods : { handle: function(event) { console.log(event.keyCode) } } });
计算机案例var vm = new Vue( { el : '#app', data: { a : ‘’， b : '', result: ‘’},methods : {handle : function () {// 实现计算逻辑this.result = this.a+this.b}}}):_ 3,5 属性绑定 7. Vue 如何动态去处理属性
v-bind 指令用法<a v-bind : href = ‘url’ 跳转</a缩写形式<a href = ‘url’ 跳转 </a2 . V-model 的底层实现原理分析 <input v-bind : value = “msg” v- on:input = “msg = Seven.target.value” v-model指令的本质 双向数据的绑定 v-model 控制狂也会弹出 v-model v-bind可以绑定值 —— 样式绑定
class 样式处理 对象语法div v-bind : class = “{active:isActive}”</div数组语法 style 样式处理对象语法 - 数组语法 -div v-bind:style = "[base Style ; overridingStyles /div3.7 分支循坏结构 10. 分支结构
v-if
v-else
v-else -if
v - show
v- if 与 v -show 的区别
v-show 的原理
控制元素样式是否显示display：none
v - if 控制元素是否渲染到页面
循坏结构 v - for 遍历数组 li v-for = ‘item in list’ {{item}}</li li v-for = 'item,index in list {{item}} + ‘—’ + {{index}} </li基础作用 搞下思路： 12. 实现静态UI效果
周传统的方式实现标签的结构和样式 基于数据重构UI效果 14.将静态的结构和样式重构为基础Vue模块 语法的形式 处理事件绑定和2 js 控制逻辑 声明式编程 – 模板语法的结构最终现实的效果基本一致 Vue模板 Vue 实例对对象 ——》 前端功能 js控制逻辑