Vue基本用法
在学习Vue的基本用法之前，我们先简单的了解一些es6的语法
let：
特点：1.局部作用域 2.不会存在变量提升 3.变量不能重复声明
const：
特点：1.局部作用域 2.不会存在变量提升 3.不能重复声明，只声明常亮，不可变的量（因为是常量所以在初始化的时候就要赋值）
模板字符串：
tab键上面的反引号 ${变量名}来插值
let name = "xiaoming"
let str = `我是${name}`
箭头函数
function(){} == () => {} this的指向发生了改变
let add = function (x) {
return x
};
console.log(add(6));
let add = (x) => {
return x
};
console.log(add(30))
es6的类
原型 prototype 当前类的父类（继承性）
function Vue(name,age) {
this.name = name;
this.age = age
}
Vue.prototype.showName = function () {
console.log(this.name)
};
var vue = new Vue("xiaoming",18);
vue.showName()
Vue的介绍
前端的三大框架：
vue：尤雨溪，渐进式的JavaScript框架
react：Facebook公司，里面的高阶函数非常多，对初学者不友好
angular：谷歌公司，目前更新到6.0，学习angular需要typescript
vue的基本引入和创建
1.下载
cdn方式：
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
2.引包
<script src='./vue.js'></script>
3.实例化
<div id="app">
<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ "hahaha" }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {"name":"haha"} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? "真的":"假的" }}</h2>
<p>{{ msg2.split("").reverse().join("") }}</p>
<div>{{ text }}</div>
</div>
<!--引包-->
<script src="./vue.js"></script>
<script>
//实例化对象
new Vue({
el:"#app",//绑定标签
data:{
//数据属性
msg:"黄瓜",
person:{
name:"xiaoming"
},
msg2:"hello Vue",
text:"<h2>日天</h2>"
}
})
</script>
vue的指令v-text和v-html
v-text相当于innerText
v-html相当于innerHTML
<div id="content">
{{ msg }}
<div v-text="msg"></div>
<div v-html="msg"></div>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:"#content",
data(){
//data中是一个函数，函数中return一个对象，可以是空对象，但是不能不return
return {
msg:"<h2>zhangqing</h2>"
}
}
})
</script>
v-show：相当于 style.display
v-if：相当于创建
区别：
v-if vs v-show
v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。 v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。
v-bind和v-on
v-bind可以绑定标签中任何属性 简写 ：
v-on可以监听 js中所有事件 简写 @
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
.active{
background-color: green;
} </style>
</head>
<body> <div id="app">
<!--<button v-on:click = 'handlerChange'>切换颜色</button>-->
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<!--<img v-bind:src="imgSrc" v-bind:alt="msg">-->
<!--<div class="box" v-bind:class = '{active:isActive}'></div>--> <button @mouseenter = 'handlerChange' @mouseleave = 'handlerLeave'>切换颜色</button>
<!--v-bind 标签中所有的属性 img标签src alt,a标签的href title id class-->
<img :src="imgSrc" :alt="msg">
<div class="box" :class = '{active:isActive}'></div>
</div>
<!--1.引包-->
<script src='./vue.js'></script>
<script>
//数据驱动视图 设计模式 MVVM Model View ViewModel //声明式的JavaScript框架 // v-bind和v-on的简便写法 : @
new Vue({
el: '#app',
data() {
//data中是一个函数 函数中return一个对象，可以是空对象 但不能不return
return {
imgSrc:'./1.jpg',
msg:'美女',
isActive:true
}
},
methods:{
handlerChange(){
// this.isActive = !this.isActive;
this.isActive = false;
},
handlerLeave(){
this.isActive = true;
}
} })
</script> </body>
</html>
v-for 遍历：可以遍历列表，也可以遍历对象
在使用vue的v-for指令的时候，一定要绑定key，避免vue计算dom
<div id="app">
<ul v-if='data.status == "ok"'>
<li v-for="(item,index) in data.users" :key="item.id">
<h3>{{ item.id }}---{{ item.name }}</h3>
</li>
</ul>
<div v-for="(value,key) in data.person" :key="index"> #遍历对象时，第一个是value，第二个是key
{{ key }} --- {{ value }}
</div>
</div>
<script src='./vue.js'></script>
<script>
new Vue({
el:"#app",
data(){
return{
data:{
status:"ok",
users:[
{id:1,name:"alex",age:18},
{id:2,name:"wusir",age:30},
{id:3,name:"yuan",age:58}
],
person:{
name:"alex"
}
}
}
}
})
</script>
watch和computed
watch可以监听单个属性，也可以监听多个
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ msg }}</p>
<button @click = 'clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
new Vue({
el:'#app',
data(){
return {
msg:"alex",
age:18
} },
methods:{
clickHandler(){
this.msg = "wusir"
}
},
watch:{
//watch单个属性，如果想监听多个属性 声明多个属性的监听
'msg':function (value) { console.log(value); if (value === 'wusir'){
alert(1);
this.msg = '大武sir'
}
},
'age' :function (value) { }
}
})
</script>
</body>
</html>
计算属性 computed
监听多个属性
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="app">
<p>{{ myMsg }}</p>
<button @click='clickHandler'>修改</button>
</div>
<script src="vue.js"></script>
<script>
let vm = new Vue({
el: '#app',
data() {
return {
msg: "alex",
age: 18
} },
created() {
//定时器 ajax 库 function(){}
setInterval(() => { })
},
methods: {
clickHandler() {
//this的指向就是当前对象
this.msg = "wusir";
this.age = 20;
},
clickHandler: function () {
console.log(this);
} },
computed: {
myMsg: function () {
//业务逻辑 // 计算属性默认只有getter方法
return `我的名字叫${this.msg},年龄是${this.age}`;
}
}
}) console.log(vm);
</script>
</body>
</html>
Vue基本用法的更多相关文章
- Vue props用法详解
Vue props用法详解 组件接受的选项之一 props 是 Vue 中非常重要的一个选项.父子组件的关系可以总结为: props down, events up 父组件通过 props 向下传递数 ...
- vue setTimeout用法 jquery滚动到某一个div的底部
//vue 中setTimeOut用法 var $this = this; setTimeout(function(){ $this.goEnd() }, 10); goEnd:function(){ ...
- vue better-scroll用法
滚动位置固定:在vue中通过路由切换页面时组件会自动滚动到顶部,需要监听滚动行为才能让滚动位置固定,better-scroll解决了这个问题. 常用效果:移动端很常见的效果,当滑动右边部分的时候,左边 ...
- vue之用法
一.安装 对于新手来说,强烈建议大家使用<script>引入 二. 引入vue.js文件 我们能发现,引入vue.js文件之后,Vue被注册为一个全局的变量,它是一个构造函数. 三.使用V ...
- Vue 基本用法
Vue的基本用法 模板语法{{ }} 关闭掉 django中提供的模板语法{{ }} 指令系统 v-text v-html v-show和v-if v-bind和v-on v-for v-model ...
- vue插槽用法(极客时间Vue视频笔记)
vue插槽 插槽是用来传递复杂的内容,类似方法 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- Vue.extend用法
Vue.extend 是构造一个组件的语法器. 用法 Vue.extend ( options ),options 是对象: 使用基础Vue构造器,创建一个子类,参数是一个包含组件选项的对象,data ...
- vue基础用法
vue.js是什么 vue.js也称为vue,读音/vju/ 是一个构建用户界面的框架 是一个轻量级MVVM(Model-view-viewModel)框架,和angular,react类似,其实就是 ...
- 杂记 -- 关于vue-router样式、vuecli引用全局js函数、vue.slot用法
1.routerLinkTo 样式设置 首先,点击routerlink标签如下图:添加:router-link-active,router-link-exact-active两个类的样式 router ...
随机推荐
- 【07月03日】A股ROE最高排名
个股滚动ROE = 最近4个季度的归母净利润 / ((期初归母净资产 + 期末归母净资产) / 2). 查看更多个股ROE最高排名 兰州民百(SH600738) - ROE_TTM:86.45% - ...
- 自定义Yaml解析器替换Properties文件
自定义Yaml解析器替换Properties文件 项目结构 案例代码 配置类SpringConfiguration @Configuration @Import(JdbcCofnig.class) @ ...
- Npoi 的使用
npoi这个office写入,我个人有点不方便,但是因为需要使用所以不得不去用了. 原因: 1. 没文档 2. 网上的案例版本不同 3. 对于复杂列不好做处理 跟网上其他工具的对比,好处就是不需要依赖 ...
- SQL中GROUP BY用法示例
概述 GROUP BY我们可以先从字面上来理解,GROUP表示分组,BY后面写字段名,就表示根据哪个字段进行分组,如果有用Excel比较多的话,GROUP BY比较类似Excel里面的透视表. GRO ...
- Android开发DDMS找不到Emulator Control的方法
1.右键DDMS,点击reset. 2.window->show view->other->android->Emulator Control
- 用lambda表达式写分组查询的示例
需要完成的查询逻辑:查询A表中根据CertificateDelayApplyRecordId 分组,每条记录算8个课时,查询出每个CertificateDelayApplyRecordId已经学习了的 ...
- org.springframework.stereotype
org.springframework.stereotype 1.@controller 控制器(注入服务) 2.@service 服务(注入dao) 3.@repository dao(实现dao访 ...
- php调用webservice接口，java代码接收不到参数
前段时间做了一个项目的二次开发,有个功能是需要php调用java实现的webservice接口,并传递一些参数给接口,然后按照对方提供的接口说明文档进行传参调用,java那边有接收到请求,但是参数总是 ...
- Java自学-类和对象 传参
Java中的传参 变量有两种类型 基本类型 和类类型 参数也是变量,所以传参分为 基本类型传参 类类型传参 步骤 1 : 基本类型传参 基本类型传参 在方法内,无法修改方法外的基本类型参数 publi ...
- spark的存储系统--BlockManager源码分析
spark的存储系统--BlockManager源码分析 根据之前的一系列分析,我们对spark作业从创建到调度分发,到执行,最后结果回传driver的过程有了一个大概的了解.但是在分析源码的过程中也 ...