前端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 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
随机推荐
- Python算法(含源代码下载)
关键字:Python Algorithms Python算法 Mastering Basic Algorithms in the Python Language 使用Python语言掌握基本算法 P ...
- WPF 线程:使用调度程序构建反应速度更快的应用程序
原文:WPF 线程:使用调度程序构建反应速度更快的应用程序 作者:Shawn Wildermuth 原文:http://msdn.microsoft.com/msdnmag/issues/07/10/ ...
- AutoEncoder一些实验结果，并考虑
看之前Autoencoder什么时候,我做了一些练习这里:http://ufldl.stanford.edu/wiki/index.php/Exercise:Sparse_Autoencoder .其 ...
- WPF 将图片进行灰度处理
原文:WPF 将图片进行灰度处理 处理前: 处理后: 这个功能使用使用了 FormatConvertedBitmap(为BitmapSource提供像素格式转换功能) 代码如下: ...
- 新版【CefSharp】 禁用右键菜单 43.00+
原文:新版[CefSharp] 禁用右键菜单 43.00+ 禁用右键菜单其实是很容易的.主就要是实现一个接口 IMenuHandler ,这个接口有一个 OnBeforeContextMenu 的方 ...
- C++使用libcurl做HttpClient（业务观摩，用C++封装过程式代码，post和get的数据,最好url编码，否则+会变成空格）good
当使用C++做HTTP客户端时,目前通用的做法就是使用libcurl.其官方网站的地址是http://curl.haxx.se/,该网站主要提供了Curl和libcurl.Curl是命令行工具,用于完 ...
- PHP中的序列化
接口 Serializable { abstract public string serialize (void); abstruact public void unserialize (string ...
- This problem will occur when running in 64 bit mode with the 32 bit Oracle client components installed.
Attempt to load Oracle client libraries threw BadImageFormatException. This problem will occur when ...
- WPF——TargetNullValue(如何在绑定空值显示默认字符)
原文:WPF--TargetNullValue(如何在绑定空值显示默认字符) 说明:在数据绑定时,如果有些字段为空值,那么在数据绑定时可以用默认值来显示为空的字段. </Grid> { L ...
- Python Pandas 分析郁达夫《故都的秋》
最近刚学这块,如果有错误的地方还请大家担待. 本文用到的Python包: Ipython, Numpy, Pandas, Matplotlib 故都的秋原文参考:http://www.xiexingc ...