前端Vue基础学习
Vue基础
对与vue的简洁明了的干货分享,适合小白学习观看,如果有笔误或者想了解更多的,请给笔者留言,后续会继续分享,从零开始的vue相关经验
- 1、创建vue实例
<div id="app"></div> const vm = new Vue({ el:'app', data:{ } })
- 2、插值语法
<!-- 双花括号将数据当成普通文本显示 其中可以写运算,或者判断等表达式运算 容易遭受xss攻击 --> <div id="box"> {{name}} <p> {{20>30?'小于':'大于'}}</p> <p>{{10+20}}</p> <!-- v-html 可以将标签解析 --> <p v-html="name"></p> <p v-if="isShow">我是动态创建和删除</p> <p v-show="isShow">我是动态隐藏和显示</p> <!-- 简写 带有v称之为指令 v-bind :class = :class//控制一般属性 v-on click = @click//绑定事件 v-if isShow 为true,创建,false删除 v-show ....显示,...,隐藏 --> <button v-on:click="handleClick">点击</button> <p v-bind:class="isShow?'aa':'bb'"></p> </div> <script> var vm = new Vue({ el:"#box", data:{ name:"<b>xiaoming<b/>", isShow:true, }, methods:{ handleClick(){ console.log(11); this.isShow=false; } } }) </script>
- 3、条件渲染
<body> <div id="box"> <p v-if="isCreated">渲染删除</p> <p v-else>qqq</p> <!-- 渲染多个使用template --> <template v-if="isCreated"> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> <p>ddddd</p> </template> <!-- v-show不支持template --> <p v-show="isShow">显示隐藏</p> </div> </body> <script src="../vue.js"></script> <script> const vm = new Vue({ el:"#box", data:{ isCreated:true } }) </script>
- 4、列表渲染
body> <div id="box"> <!-- v-for 循环渲染,可以用 in/of 可以有2个参数(data遍历的值,index下标) --> <!-- 每一项应该有一个唯一的key 一般为id --> <!-- 列表渲染,可以通过改变数组动态渲染当影响到数组本身时会刷新渲染--> <!-- 但通过索引改变无法影响渲染 解决方法vue.set(vm.datalist,0,newvalue)--> <input type="text" v-model="mytext"> <!-- 过滤 --> <ul> <!-- <li v-for="(data,index) in datalist" :key="index"> {{data}} -- {{index}} </li> --> <li v-for="(data,index) in cmputeddatalist" :key="index"> {{data}} -- {{index}} </li> </ul> </div> </body> <script src="../vue.js"></script> <script> const vm = new Vue({ el:"#box", data:{ datalist:['aa','bb','ccc'], mytext:"", }, cmputed:{ cmputeddatalist:function(){ return this.datalist.filter(item=>item.indexof(this.mytext)>-1) } } }) </script>
- 5、事件处理
<div id="box"> <!-- 事件处理方法一:直接触发函数代码表达式 --> <p>{{count}}</p> <button @click="count=count-1">-</button> <button @click="count=count+1">+</button> <!-- 二:绑定函数名,系统默认将事件对象传过去 --> <p>{{name}}</p> <button @click="handleClick">click</button> <!-- 三:绑定函数需要传参数使用要传事件对象传$event --> <button @click="handleClick1(1,2,$event)">click</button> <!-- vue中事件触发遵循冒泡 阻止冒泡在click.stop--> <!-- 事件修饰符 .stop阻止冒泡 prevent阻止默认事件 once只会触发一次 self只有事件源为本身时才能触发,修饰符可以串联使用.stop.prevent --> <ul @click="ulclick "> <li @click="liclick">1111</li> </ul> <!-- 键值修饰符 enter回车键,space空格键 --> <input type="text" v-model="text" @keydown.enter="enter">{{newtext}} </div> <script src="../vue.js"></script> <script> var vm =new Vue({ el:"#box", data:{ count:1, name:"xiaoming", text:"", newtext:"" }, // methods中的方法,可以在this的$options.methods中找到,可以实现方法互用 methods:{ enter(){ this.newtext=this.text }, handleClick(ev){ console.log(ev.target); this.name="aaaa" }, handleClick1(a,b,event){ console.log(a,b,event.target) }, ulclick(){ console.log('ul的点击') }, liclick(){ console.log('li的点击') } } }) </script>
- 6、css与style的绑定
<style> .aa{ background: red; } .bb{ background: yellow; } </style> </head> <body> <!-- 不会覆盖只是添加到class中 --> <!-- v-bind 可以使用数组写法,三目运算符,和对象写法 --> <div id="app"> <p class="red" :class="isshow?'aa':'bb'">css样式</p> <p :style="obj">对象样式</p> <p :style="[obj,obj2]">数组样式</p> </div> <script src="../vue.js"></script> <script> const vm = new Vue({ el:"#app", data:{ isshow:false, obj:{ background:"red", }, obj2:{ fontSize:"30px" } } }) // 在vue中向font-size:30px,要写成fontSize:"30px"; </script>
- 7、表单的输入与绑定
<body> <!-- 表单中v-model 有value时绑定value,单选框中绑定checked属性 --> <div id="box"> <input type="text" v-model="value">{{value}}<br/> <input type="checkbox" v-model="isChcked">{{isChcked}}<br/> <!-- 绑定多个的时候绑定数组,必须有value值,点击会把选中的加入数组中 --> <input type="checkbox" v-model="checkgroup" value="react">react<br/> <input type="checkbox" v-model="checkgroup" value="vue">vue<br/> <input type="checkbox" v-model="checkgroup" value="jquery">jquery<br/> {{checkgroup}} <!-- 修饰符 lazy 失去焦点时才会同步渲染,number将输入值转换为number trim默认清除首尾空格--> <input type="text" v-model.lazy="name">{{name}}<br/> <input type="number" v-model.number="age">{{age}}<br/> <input type="text" v-model.trim="text">|{{text}}|<br/> </div> </body> <script src="../vue.js"></script> <script> const vm = new Vue({ el:"#box", data:{ value:"", isChcked:false, checkgroup:[], name:"", age:"100", text:"" } }) </script>
8.methods中定义方法,
9.computed计算属性,可以当做变量使用,computed会根据数据改变而重新计算,调用多个时,只会执行一次,然后缓存值,methods会多次执行,
10.watch监听某一属性的改变,而触发,(推荐使用computed)
前端Vue基础学习的更多相关文章
- Vue – 基础学习(4):事件修饰符
Vue – 基础学习(3):事件修饰符
- Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
Vue – 基础学习(3):$forceUpdate()和$nextTick()的区别
- Vue – 基础学习(2):组件间 通信及参数传递
Vue – 基础学习(2):组件间 通信及参数传递
- Vue – 基础学习(1):对生命周期和钩子函的理解
一.简介 先贴一下官网对生命周期/钩子函数的说明(先贴为敬):所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和方法进行运算.这意味着你不能使用箭头函数来定义一个生命周 ...
- [前端] VUE基础 (6) (v-router插件、获取原生DOM)
一.v-router插件 1.v-router插件介绍 v-router是vue的一个核心插件,vue+vue-router主要用来做SPA(单页面应用)的. 什么是SPA:就是在一个页面中,有多个页 ...
- 前端——Vue.js学习总结一
一.什么是Vue.js 1.Vue.js 是目前最火的一个前端框架,React是最流行的一个前端框架 2.Vue.js 是前端的主流框架之一,和Angular.js.React.js 一起,并成为前端 ...
- vue基础学习(二)
02-01 vue事件深入-传参.冒泡.默认事件 <div id="box"> <div @click="show2()"> < ...
- vue基础学习(一)
01-01 vue使用雏形 <div id="box"> {{msg}} </div> <script> window.onload= func ...
- 偏前端-vue.js学习之路初级(二)组件化构建
vue.js 组件化构建 组件系统是 Vue 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
随机推荐
- WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能
原文:WPF中使用AxisAngleRotation3D实现CAD的2D旋转功能 对于CAD图形来说,3D旋转比较常用,具体实现方法在上篇文章<WPF中3D旋转的实现 >中做了 ...
- OpenGL(一)绘制圆、五角星、正弦曲线
OpenGL入门之"顶点":OpenGL规定,一个多边形必须是一个"凸多边形",即连接多边形上任意两点,其连线都在多边形内部.多边形可以由其边上的端点(这里可称 ...
- python3获取天气预报
#!/usr/local/bin/python3 #coding=utf-8 ''' Created on 2011-2-25 @author: http://www.cnblogs.com/txw1 ...
- cocos2d-x 3.2 它 2048 —— 第三
***************************************转载请注明出处:http://blog.csdn.net/lttree************************** ...
- asp .net Cookies
Request.Cookies和Response.Cookies When validating cookies or cookie data from the browser you should ...
- 去掉 Windows 中控件的虚线框(当当 element == QStyle::PE_FrameFocusRect 时,直接返回,不绘制虚线框)
在 Windows 中,控件得到焦点的时候,会显示一个虚线框,很多时候觉得不好看,通过自定义 QProxyStyle 就可以把这个虚线框去掉. 1 2 3 4 5 6 7 8 9 10 11 12 1 ...
- android Camera2 API使用详解
原文:android Camera2 API使用详解 由于最近需要使用相机拍照等功能,鉴于老旧的相机API问题多多,而且新的设备都是基于安卓5.0以上的,于是本人决定研究一下安卓5.0新引入的Came ...
- wpf 快速建立可以拖动对象
1.引用两个.net 程序集 2.xaml name space导入 xmlns:i ="http://schemas.microsoft.com/expression/2010/inter ...
- google的开源项目总结(转载)
转自http://www.feng5166.com/blog/424.html google的开源项目值得我们一用的,这些项目很有意义,甚至可以直接用在我们自己的工作上!学习编程的的一个比较好的方式就 ...
- Linux学习之“exit函数”
先看下"_exit"和"exit": exit被调用时,将冲刷所有的标准I/O流,关闭所有打开的文件描述符.在传统实现中,同时也将关闭标准I/O流.即表示标准输 ...