需要考虑的主题如下： 1. MVC 和MVVM 的区别2. Vue 的基本代码结构3. 插值v-clock：通过使用v-cloak，可以解决插值v-text 的闪烁问题： v- text 会覆盖元素内的原始内容，而插值表达式仅替换占位符，不会清除整个元素。 v-html 包含标签，Vue 可以显示v-bind 的缩写。 v-on 缩写事件绑定机制缩写@v-model data 双向绑定v-for 循环v-if v-show 相当于hide。该控件不会被重新创建或删除。然而，元素会发生变化。 display: none if 如果元素包含频繁切换，则使用v-show4 和事件修饰符：stop .prevent .capture .selfe .once 其实就是事件传递，就像在Android 5 中一样是一个过程。控制区域中的数据是一个对象。指定。 受控区域使用的数据以及方法都是对象。您可以直接定义方法。 6.在Vue中，如果你想以VM强度访问数据，这与Android 7类似。如何使用v-for key 属性8. v-model 只能用在表单元素上9. Vue 中绑定样式有两种方式v-bind: class v-bind: style 开始Vue .js 最为流行前端框架，可用于开发网站和移动应用程序。 Vue Angular 使用了Vue 的三个主流框架。它仅专注于构建用户界面。使用第三方库和其他项目集成框架非常容易。如果您的项目需要，这是一套完整的解决方案。改变框架需要重建项目库。这是一个小功能，对您的项目影响相对较小。如果要改的话，就是后端分层开发理念。 MVVM是一个前端概念，主要将视图层分为三个部分。 模型视图VM 视图模型。
!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8'meta name='viewport' content='width=device-width，initial-scale=1.0'meta http-equiv='X-UA 兼容'内容='ie=edge' titleDocument/title !-- Vue import -- script src='./lib/vue.min.js'/script/headbody !-- Vue 控制的元素区域vue -- div id=' app ' p{{ msg }}/p /div !-- vue 的强项-- script //新的Vue 是一个MVVM 虚拟机var vm=new Vue({ el:'#app', //这是MVVM 页面保存M Data的数据： { //msg:'I am shiming' } }) /script/body/html 第二个Demo
您可以使用v-cloak 来解决插值表达式中的闪烁问题。 v-text 默认情况下没有闪烁问题，但是插值表达式会覆盖元素中的原始内容，但插值表达式只是替换了占位符，并没有清除整个内容。 v-html可以渲染内容内标签的内容。
html lang='en'
头
元字符集='UTF-8'
元名称='视口'内容='宽度=设备宽度，初始比例=1.0'
meta http-equiv='X-UA 兼容' content='ie=edge'
标题文件/标题
风格
[v-斗篷]{
display: 无。
}
/风格
/头
身体
div id='应用程序'
!-- 使用v-cloak解决插值公式中的闪烁问题--
p v-斗篷-------------{{ msg }}-----/p
!-- v-text 和v-cloak 具有类似的功能--
h4 v-text='msg'========/h4
!-- v-text 默认没有闪烁问题--
!-- v-text 会覆盖元素内原来的内容，而插值表达式只是替换占位符，并不会清除整个元素--
div{{msg2}}/div
div v-text='msg2'/div
!-- 这可以被渲染--
div v-html='msg2'/div
/div
脚本src='./lib/vue.min.js'/script
脚本
var vm=新的Vue({
el:'#app',
数据：{
msg:'123',
msg2:'h1我是诗茗。我爱学习/h1'
}
})
/剧本
/身体
/html
第三次演示
如何定义Vue代码结构如何定义插值表达式和v-text v-cloakv-html v-bind缩写：v-on 时间绑定机制缩写@!DOCTYPE html
html lang='en'
头
元字符集='UTF-8'
元名称='视口'内容='宽度=设备宽度，初始比例=1.0'
meta http-equiv='X-UA 兼容' content='ie=edge'
标题文件/标题
风格
[v-斗篷]{
display: 无。
}
/风格
/头
身体
div id='应用程序'
!-- 使用v-cloak解决插值公式中的闪烁问题--
p v-斗篷-------------{{ msg }}-----/p
!-- v-text 和v-cloak 具有类似的功能--
h4 v-text='msg'========/h4
!-- v-text 默认没有闪烁问题--
!-- v-text 会覆盖元素内原来的内容，而插值表达式只是替换占位符，并不会清除整个元素--
div{{msg2}}/div
div v-text='msg2'/div
!-- 这可以被渲染--
div v-html='msg2'/div
!-- v-bind 是Vue 中的一个指令，提供绑定属性的指令--
input type='button' value='anniu' v-bind:title='title +'我爱你''
!-- v-bind 可以省略为：合法的JS 可以用v-bind 编写
表达 -
input type='button' value='anniu' :title='title +'我爱你2222'' v-on:click='show'
!-- 悬停时将出现一个弹出窗口。这有点令人困惑——
input type='button' value='Aniu' :title='title +'我爱你2222'' v-on:mouseover='show'
input type='button' value='Aniu' :title='title +'我爱你2222'' @click='show'
/div
脚本src='./lib/vue.min.js'/script
脚本
var vm=新的Vue({
el:'#app',
数据：{
msg:'123',
msg2:'h1我是诗茗。我喜欢学习/h1',
title:'这是我的标题',
},
方法：{
显示：函数(){
Alert('悬停时将出现弹出窗口')
}
}
})
/剧本
/身体
/html
!-- 如何定义Vue代码结构，如何定义插值表达式和v-text v-cloak --
!-- v-html--
!-- v-bind 缩写： --
!-- v-on 时间绑定机制的缩写@--
第四个演示
.prevent 防止默认行为并防止标记在任何地方执行。 Capture首先将事件传递给div，然后将其传递给btn。方向/停止事件的事件传递变化不能仅将事件传递给div 一次。 stop 和self 的区别在于self 仅阻止冒泡行为。自己触发冒泡行为实际上并不能阻止冒泡行为，但是停止可以完全阻止冒泡行为。 UTF-8'元名称='视口'内容='宽度=设备宽度，初始比例=1.0'元http-equiv='X-UA兼容'内容='ie=edge'titleDocument/标题脚本src='/lib/vue.min.js'/script style .inner { height:30px;background-color: darkblue } .outer{padding:40px; /style/headbody div id='app' div class='inner' @Click='divClick' ！ - /stop事件不能指定div 传递事件-- input type='button' value='click me' @click.stop='btnClick' /div !-- 当网站完成http时，啊，wori--a href='http://www'baidu.com' @click.prevent='baidu' 百度click/a!--capture先把事件传给div，然后btn给你。换个方向-- div class='inner' @Click.capture='divClick' !-- //事件应该传递给div --input type='button' value='Click me' @click 即可不是。 stop='btnClick' /div !-- 仅当点击div 时执行Click 事件-- div class='inner' @Click.self='divClick' input type='button' value='click me' @click=' btnClick' /div !-- Once 事件仅触发一次-- a href='http://www.baidu.com' @click.prevent.once='baidu'baiduxia/a div class='outer ' @click='divClick' div class='inner' @click='innerClick' 输入类型='button' value='click medddd' @click='btnClick' /div /div div class='outer' @click='divClick' div class=' inner' @click='innerClick' !-- Stop down Pass -- input type='button' value='Click me dddd' @click.stop='btnClick' /div /div !-- self 实际上不会阻止冒泡，只是阻止它触发自己的冒泡行为，但是stop 可以完全阻止该行为-- div class='outer' @click=' divClick' div class='inner' @click.self='innerClick' !-- Stop下面的路径-- input type='button ' value='Click me dddd' @click='btnClick' /div/div /div script //在vm实例中，如果想使用data来传递数据或者调用a方法中的方法， //this.data name this is vm var vm=new Vue({ //这里冒号请注意，啊wori el: '#app', data: { msg: '史敏同学你好！ ', IntervalID: null }, method: { baidu() { console.log('badiu') }, divClick() { console.log('我是divClick的点击事件') }, btnClick() { console.log( '我是btn的点击事件') }, innerClick(){ console.log('我是innerClick的点击事件') } } }) /script/body/html!-- .prevent 设置默认行为阻止并防止标签乱跑--!-- capture先将事件传递给div，再将事件向另一个方向传递给btn --!-- /stop event 将事件传递给div 无法传递-- !-- 事件只触发一次-- !- - stop 和self 的区别-- !-- self 只阻止触发自身的冒泡行为，实际上并不会阻止冒泡行为。然而，停止可以完全阻止双向行为。 --v-model 数据绑定
在浏览器的控制台中键入window.vm 以查看分配给代码的值。当然，您也可以使用vm.msg 来检索分配给您的代码的值。您还可以更改虚拟机页面上的msg 值。msg='new'; 只需刷新页面即可实现模型中表单元素和数据之间的双向绑定。请注意，v-model 只能与表单元素输入（地址电子邮件文本广播）一起使用。选择复选框textarea!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' meta name='viewport' content='width=device-width,initial-scale=1.0' meta http-equiv='X-UA -兼容' content='ie=edge' titleDocument/标题脚本src='./lib/vue.min.js'/script/headbody div id='app' h4{{msg}}/h4 !-- 100%虽然输入框的宽度，v-bind只能实现数据。单项绑定会自动将m 绑定到V。无法进行双向数据绑定-- input type='text' v-bind:value='msg' style='width: 100%;' !-- 这是一个输入框，但是当你输入时，页面上的值也发生变化，可以实现数据的双向绑定-- input type='text' v-model:value='msg' style='width: 100%;' /div script //这个VM将被加载到浏览器的内存中area var vm=new Vue({ el:'#app', data:{ msg:'shiming Tongxue' } }) /script/body/html!-- 在浏览器控制台中输入window.vm，找到分配给代码的值。马苏。 当然，您也可以使用vm.msg 来检索分配给您的代码的值。页面上的msg值vm.msg='new'; 刷新页面即可更改--! -- 请注意，v-model可以实现表单元素与模型中数据的双向绑定。选择表单元素中使用的复选框用于输入（地址、电子邮件、文本、广播）textarea --实现的计算器
var codeStr='parseInt(this.n1)'+this.opt+'parseInt(this.n2)' this.result=eval(codeStr) 这个解决方案是机会主义的，不应该在您的项目中经常使用。 lang='en'head meta charset='UTF-8'meta name='viewport'content='width=设备宽度，初始比例=1.0'meta http-equiv='X-UA兼容'content='ie=edge ' titleDocument/标题脚本src='./lib/vue.min.js'/script/headbody div id='app' 输入类型='text' v-model='n1' select v-model=' opt' 选项value='+'+/option Option value='-'-/option Option value='*'*/option Option value='/'//option /选择输入类型='text' v-model='n2'输入类型='按钮'值='='@click='calc'输入类型='文本'v-model='结果'/div script var vm=new Vue({ el: '#app', data: { n1: 0 , n2: 0, opt: '+', result: 0 },messages: { //等号按钮事件calc(){ //代码过多//switch(this.opt){ //case '+': //this. result=parseInt(this.n1)+parseInt(this.n2) //Break; //case '-': //this.result=parseInt(this.n1)-parseInt(this.n2) //break;/case '*': //this.result=parseInt(this.n1)*parseInt(this.n2) //break; //case '/': //this.result=parseInt(this.n1 )/parseInt (this.n2) //Break; //} //不要在项目中频繁使用此解决方案var codeStr='parseInt(this.n1)' +this.opt+' parseInt(this .n2) )' this.result=eval(codeStr) } } }) /script/body/htmlVue 中使用的样式
!DOCTYPE htmlhtml lang='en'head meta charset='UTF-8' meta name='viewport' content='width=设备宽度，初始化
l-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script> <style> .red { color: red; } .thin { font-weight: 200; } /* 倾斜 */ .italic { font-style: italic; } /* 间距的 */ .active { letter-spacing: 0.5em; } </style></head><body> <div id="app"> <h1 class="red thin italic active">大大大大大大大F</h1> <h1 class="red ">大大大大大大大F</h1> <!-- v-bind 绑定属性 但是这样找不到哦 --> <!-- <h1 :class="red">大大大大大大大F</h1> 这样纸是找不到的哦 --> <!-- 直接传递数据 使用v-bind数据绑定 ，但是没啥优点 --> <h1 :class="['red','italic','active','thin']">大大大大大大大Fdddd</h1> <!-- 在数组中使用三元表达式 --> <h1 :class="['red','italic','active',flag?'thin':'']">我是好同学 真的是好同学</h1> <h1 :class="['red','italic','active',flagw?'thin':'']">我是好同学 真的是好同学</h1><!-- 使用类 如果标记为true 就加载，不使用的话，就不加载 ，提高代码的可读性 --> <h1 :class="['italic','active',{'red':flag}]">我是好同学 真的是好同学</h1> <h1 :class="['italic','active',{'red':flagw}]">我是好同学 真的是好同学</h1> <!-- 前面是一个类名，后面是一个标识符 使用 v-bind 绑定对象的时候 --> <h1 :class="[{'active':true},{'red':true}]">我是好同学 true真的是好同学</h1> <h1 :class="[{'active':false},{'red':true}]">我是好同学 false真的是好同学</h1> <h1 :class="classObj">我是一个对象保存到里面去的</h1> </div> <script> var vm = new Vue({ el: "#app", data: { flag:true, flagw:false, classObj:{active:false} }, methods: {} }) </script></body></html>Vue使用Style <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script></head><body> <div id="app"> <h1 :style="{color:'red','font-weight':'200'}">我是你的爸爸</h1> <h1 :style="styleObj">我是你的爸爸</h1> <h1 :style="styleObj2">我是你的爸爸</h1> <!-- 绑定两个对象，我曹牛逼哦 --> <h1 :style="[styleObj2,styleObj]">我是你的爸爸</h1> </div> <script> var vm=new Vue({ el:"#app", data:{ styleObj:{color:'red','font-weight':'200'} , styleObj2:{'font-style':'italic'} } }) </script></body></html>这就就是绑定key 有个疑问？？？现在最新版本的key可以使用对象了啊 ＊原来的2.4.0的时候 只能使用 number或者string key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 在组件中循环的时候，v-for 必须指定key值 <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script></head><body> <div id="app"> <div> <label> ID:<input type="text" v-model="id"> </label> <label> Name:<input type="text" v-model="name"> </label> </div> <input type="button" value='添加' @click="add"> <!-- <p v-for="item in list" > <input type="checkbox"> {{item.id}} ---{{item.name}} </p> --> <!-- 这就就是绑定key 有个疑问？？？现在最新版本的key可以使用对象了啊 原来的2.4.0的时候 只能使用 number或者string key在使用的时候，必须使用v-bind属性绑定的形式，指定key的值 --> <!-- 在组件中循环的时候，v-for 必须指定key值 --> <p v-for="item in list" :key="item" > <input type="checkbox"> {{item.id}} ---{{item.name}} </p> </div> <script> var vm=new Vue({ el:"#app", data:{ id:"", name:"", list:[ {id:1,name:"shiming"}, {id:2,name:"shimingai"}, ] }, methods:{ add(){ // 添加 这种方式没有问题 // this.list.push({id:this.id,name:this.name}) // 这种添加的方式 就有问题了 哈哈 难受哦 原因就是没有key 没有指定那一项被选中了 this.list.unshift({id:this.id,name:this.name}) } } }) </script></body></html>v-show 和v-if的区别 v-show 频换的切换<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script src="./lib/vue.min.js"></script></head><body> <div id="app"> <!-- 不能有空格啊 "button " --> <input type="button" value="点我" @click="toggle"> <input type="button" value="点我" @click="flag=!flag"> <!-- 就相对于安卓中 gone 控件 都会重新创建和删除 消耗性能比较严重--> <h3 v-if="flag">这是 v-if 控制元素</h3> <!-- 就相当于 invisible 这个控件还在 不会重新创建和删除，只是切换了元素 dispaly：none --> <!-- 如果元素涉及到频换的切换 就是用v-show --> <h3 v-show="flag">这是 v-show 控制元素</h3> </div> <script> var vm = new Vue({ el: "#app", data: { flag: true }, methods: { toggle() { this.flag = !this.flag } } }) </script></body></html> 版权声明：本文转载于今日头条，版权归作者所有，如果侵权，请联系本站编辑删除