vue1 到 vue2 v-el变成ref

【vue1 到 vue2 v-el变成ref】的更多相关文章

vue1与vue2的路由以及vue2项目大概了解

vue1的路由 1.设置根组件 Vue.extend() 2.设置局部组件 Vue.extend({template:"/home"}) 3.实例化路由 var router =new VueRouter() 4.关联路由 router.map({"./",组件名字}) 5.开启路由 router.start("根组件","#box") 6.配置默认选项 router.redirect("…

vue1 到 vue2 v-el变成ref

vue1的写法 div class="menu-wrapper" v-el="menu-wrapper"> <ul class="menu"> <li v-for="item in goods" class="menu-item"> <span class="text"> <span v-if="item.type>0&qu…

vue1.*版本中在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素例如:<div class='box' v-el: myBox>你好</div> 让你好的颜色显示为红色:this.$els.my-box.style.color = 'red' vue2.*版本中在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素例如:<div class='box' ref='myBox'>你好&…

vue1和vue2获取dom元素的方法及 nextTick() 、$nextTick()

vue1.*版本中在标签中加上el='dom',然后在代码中this.$els.dom这样就拿到了页面元素例如:<div class='box' el='myBox'>你好</div> 让你好的颜色显示为红色:this.$els.myBox.style.color = 'red' vue2.*版本中在标签中加上ref='dom',然后在代码中this.$refs.dom这样就拿到了页面元素例如:<div class='box' ref='myBox'>你好<…

vue2.0中的ref.html

前置知识请戳这里获取DOM对象以及组件对象 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.jsdelivr.net/npm/vue"></script> </head> <body> <div id=…

vue2与vue1的区别

在前面的学习过程中我们已经对vue1有了一定的了解,下面我们来学习一下vue2,看一下vue1与vue2有什么区别. 区别1: 在vue2中使用v-for指令时它可以添加重复的内容,就像可以添加相同的留言内容,下面我们来看一下在写代码的时候首先要引入的是vue2js文件. html代码: <div id="box"> <input type="button" value="添加" @click="add()"…

vue2.0中怎么获取元素

在元素上添加 v-el:food-wrapper (不用驼峰的写法) vue1版本报错: vue2版本 (vue2把vue1中的 v-el 改为了 ref vue1 v-el:foods-wrapper 调用的时候 this.el.foodsWrappervue2ref:foods−wrapper调用的时候this. refs.foodsWrapper 这样写会报错原因: 1.ref 的 key 和你填的key是一样的, 不会自动转换成驼峰式,如果你要用驼峰式直接用ref=”foodsWr…

Vue1.0用法详解

Vue.js 不支持 IE8 及其以下版本,因为 Vue.js 使用了 IE8 不能实现的 ECMAScript 5 特性. 开发环境部署可参考使用 vue+webpack. 基本用法 1 2 3 4 5 6 7 8 9 10 11 <div id="app"> {{message}} <input v-model="message"> </div> new Vue({ ele: '#app', data: { message:…

vue2路由

我们在前面的学习过程中不管是在学习angular还是vue1,都会遇到二级路由,我们现在先来看一下vue2中的一级路由. 首先要引入的是vue2与路由文件. js代码: <script> window.onload=function () { var Home={ template:"<h3>我是首页</h3>" }; var News={ template:"<h3>我是新闻页面</h3>" }; //配…

vue2.0 vs vue

vue2.0相比vue1.0 有哪些改变,今天总结了一下 vue2.0组件中 template 不在支持代码片段 //vue1.0组件中template写法 <template> <h3>我是vue1.0的写法</h3> <h2>我是vue1.0的写法</h2> </template> //vue2.0组件中 template 写法 //必须有根元素 <template> <div> <h3>我是v…