Vue全家桶实战02_【从入门到放弃系列】

指令

vue中常用v-指令演示

Demo演示

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>Vue02</title><style type="text/css">.box{width: 300px;height: 300px;background-color: red}.active{background-color: green;}</style></head>
<body><div id="app"></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">//创建实例化对象//双大括号插值//v-text innerText //v-html innerHTML//v-if //数据属性对应的值，如果为假，则不再页面中渲染，反之亦然 appendChild()  removeChild()//v-show 控制dom元素的显示隐藏 display:none | block;//v-on :原生事件名 = ‘函数名’   简便写法   @//控制类名对原素显示隐藏 display:none | block//v-bind绑定标签上的属性  （内置的属性和自定义的属性）  简写 ：//v-for = "(item,index) in menuLists"/*v-if是“真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if也是惰性的:如果在初始渲染时条件为假,则什么也不做一直到条件第一 次变为真时,才会开始渲染条件块。相比之下, V- show就简单得多一不管初始条件是什么 ,元素总是会被渲染,并且只是简单地基于CSS进行切换。-般来说，v-if有更高的切换开销,而v-show有更高的初始渲染开销。因此,如果需要非常频繁地切换,则使用v-show较好;如果在运行时条件很少改变,则使用v-if较好。*/var vm = new Vue({el:"#app",data:function(){return{msg:'指令系统',msg2:'<h2>指令系统2</h2>',isShow:true,isGreen:false,text:'乔治大哥',menuLists:[{id:1,name:'乔治',price:2400},{id:2,name:'科比',price:3400},{id:3,name:'詹姆斯',price:1400},],person:{name:'george',age:23,fav:'篮球'}}},template:`<div class='app'><h2>{{msg}}</h2><p v-text='msg'></p><div v-html='msg2'></div><div v-text='1+1'></div><div v-if='isShow'>科比出场</div><div v-if='!isShow'>曼巴out</div><div v-if="Math.random() > 0.5">已显示</div><div v-else>已隐藏</div><div v-show='isShow'>显示</div><div v-show='!isShow'>隐藏</div><div class='box' v-on:click='clickHandler' v-bind:class='{active:isGreen}' :aaa='text'></div><<img src="" alt=""><a href="" title=''></a><ul><li v-for='item in menuLists'><h5 v-text="item.id"></h5><h3>{{item.name}}</h3><em>{{item.price}}</em></li></ul><ul><li v-for = "(value,key) in person">{{key}} = {{value}}</li></ul></div>`,methods:{//点击切换颜色clickHandler(e){console.log(this);this.isGreen = !this.isGreen;}}});console.log(vm)</script>
</body>
</html>

页面展示：

双向绑定

Demo演示

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue的双向数据绑定</title>
</head>
<body><!-- v-model双向数据绑定 --><div id="app"><!-- <input type="text" :value='msg'> --><input type="text" v-model='msg'><h3>{{msg}}</h3></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">new Vue({el:"#app",data(){return{msg:"大梦"}}});</script></body>
</html>

结果展示

即：- v-mode1双向数据绑定的体现只会体现在UI控件中只能应用在有value属性的

Demo

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><title>vue的双向数据绑定</title>
</head>
<body><!-- v-model双向数据绑定 --><!-- 语法糖： 甜甜的，它是v-bind:value  和  v-on:input 的体现 --><div id="app"><!-- <input type="text" :value='msg'> --><!-- <input type="text" v-model='msg'> --><input type="text" v-bind:value='msg' v-on:input='valueChange'><h3>{{msg}}</h3></div><script type="text/javascript" src="node_modules/vue/dist/vue.js"></script><script type="text/javascript">new Vue({el:"#app",data(){return{msg:"大梦"}},methods:{valueChange(e){console.log(e.target.value);this.msg=e.target.value;}}});</script></body>
</html>

其内部的流程为：

Vue全家桶实战02_【从入门到放弃系列】相关推荐

Vue全家桶实战03_【从入门到放弃系列】
组件图示 Demo实例 <!doctype html> <html lang="en"> <head><meta charset=&quo ...
Vue全家桶实战01_【从入门到放弃系列】
准备工作先说一下使用的编程软件,sublime Text,具体怎么安装及配置,我已经写好了一篇博客.欢迎查阅. Sublime Text 的下载巨慢的问题,安装问题,html页面代码生成问题,代码提 ...
vue取div当前宽度_【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
VUE全家桶项目实战-- 4.后台首页布局
VUE全家桶项目实战-- 4.后台首页布局一.页面布局二.创建Home组件三.路由index.js 文件配置主页路径四.添加welcome组件一.页面布局 <el-container& ...
视频教程-Vue全家桶前后台分离实战案例（含资料）-Vue
Vue全家桶前后台分离实战案例(含资料) 张长志技术全才.擅长领域:区块链.大数据.Java等.10余年软件研发及企业培训经验,曾为多家大型企业提供企业内训如中石化,中国联通,中国移动等知名企业.拥有 ...
Vue开发入门(二) | 说说Vue全家桶有哪些~
全家桶,顾名思义,就是一个系列,可以组合开发成完整强大的Vue项目前言: *Vue两大核心思想:组件化和数据驱动. 组件化:把整体拆分为各个可以复用的个体数据驱动:通过数据变化直接影响bom展示, ...
谁是卧底在线游戏实战开发thinkphp5+socketio+vue全家桶
不废话直接上图: 1.tp5里面配合workerman框架,自行搭建的socket服务.下图为脚本开启,监听 2.下图懂的人自然懂,为vue跑起来时的界面 3.下面这张图,为运行进来的首页.首页可以点 ...
【前端大神面考面试官系列】入门Vue全家桶
(给达达前端加星标,提升前端技能) 面试官问:Vue如何安装的呢? 达达回答:Vue的安装可以从两个方面进行安装,第一种是CDN引入,第二种是NPM安装. CDN引入 <script src=& ...
Vue全家桶-项目实战笔记
写在前面这是我跟着黑马程序员的Vue全家桶-项目实战教程写的一篇笔记,主要记录思路,内容不完整,这里只写到了用户列表管理,进来的友友们可以根据目录,看是否有自己需要的功能这篇笔记记录的是基础vue ...

Vue全家桶实战02_【从入门到放弃系列】

指令

vue中常用v-指令演示

Demo演示

双向绑定

Demo演示

Demo

Vue全家桶实战02_【从入门到放弃系列】相关推荐

最新文章

热门文章