前端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 的另一个重要概念,因为它是一种抽象,允许我们使用小型.自包含和通常可复用的组件构建大型应用.仔细想想,几乎任意类型的应用界面都可以抽象为一个组件树: ...
随机推荐
- exponential family distribution（指数族分布）
1. exponential family 给定参数 η,关于 x 的指数族分布定义为如下的形式: p(x∣∣η)=h(x)g(η)exp{ηTu(x)} 其中 x 可以为标量也可以为矢量,可以为离散 ...
- Information centric network (icn) node based on switch and network process using the node
The present invention relates to an apparatus for supporting information centric networking. An info ...
- PHP 挖掘 XML 和 HTML 数据
数据挖掘及其重要性 常用缩略词 API: 应用程序编程接口 CDATA: 字符数据 DOM: 文档对象模式 FTP: 文件传输协议 HTML: 超文本标记语言 HTTP: 超文本传输协议 REST: ...
- 在.net core中一个简单的加密算法
using System; using System.Text; //System.Security下加密算法的命名空间 using System.Security.Cryptography; nam ...
- C#获取windows 10的下载文件夹路径
Windows没有为“下载”文件夹定义CSIDL,并且通过Environment.SpecialFolder枚举无法使用它. 但是,新的Vista 知名文件夹 API确实使用ID定义它FOLDERID ...
- WPF 设置控件阴影后，引发的Y轴位置变化问题
原文:WPF 设置控件阴影后,引发的Y轴位置变化问题 背景 最近遇到一个动画执行时,文本位置变化的问题.如下图: 如果你仔细看的话,当星星变小时,文本往下降了几个像素. 貌似有点莫名其妙,因为控件之间 ...
- ubuntu如何修改terminal终端的主机名（修改/etc/hostname文件）
有时候安装完Ubuntu系统后,打开命令终端,终端显示的主机名格式比较难看,例如 我最近买的国内某云的VPS. xxx@VM-1560-ubuntu$ xxx@VM-1560-ubuntu$ 对于有洁 ...
- 辛星与您彻底解决CSS浮子（下一个）
上述博客文章,我们解释如何使用CSS浮子,这是一个看我们如何解释清除CSS浮子.其实CSS浮动是很清楚easy,只需要使用clear它财产,至于如何利用好它.很多人可能会表决雾,我是个新手的时候还经常 ...
- C++该typeid和dynamic_cast
1.typeid在没有虚拟函数的(不相关的动态绑定),typeid它只返回操作对象的实际类型 2.typeid涉及到动态联编问题时(使用基类指针p或者引用p操作派生类对象),typeid(p)返回基类 ...
- 【转】CefSharp 与 js 相互调用
转自CSDN博客博主ghui,虽然博主说要经过他同意才能转,我只是做笔记用,没做他用,所以请博主理解,在此感谢博主! 一. CefSharp调用 js CefSharp.WinForms.Chromi ...