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 ...
随机推荐
- Java集合详解2：一文读懂Queue和LinkedList
<Java集合详解系列>是我在完成夯实Java基础篇的系列博客后准备开始写的新系列. 这些文章将整理到我在GitHub上的<Java面试指南>仓库,更多精彩内容请到我的仓库里查 ...
- stacking method house price in kaggle top10%
整合几部分代码的汇总 隐藏代码片段 导入python数据和可视化包 导入统计相关的工具 导入回归相关的算法 导入数据预处理相关的方法 导入模型调参相关的包 读取数据 特征工程 缺失值 类别特征处理-l ...
- spark中的多目录输出及压缩
最近接到一个需求,需要对spark的结果分目录输出,百度之后找到了解决方案,大多都是spark 按照key分目录输出, 但是在文件当中,会把key也输出出来,在这里以key作为目录是想建hive表时把 ...
- Struts2利用iText导出word文档（包含表格）以提供下载
J2EE ExcelStrutsXML 在公司实习期间,带我的老师让我实现一功能——在显示课表的页面上上点击“导出文件“时能以word文档形式下载课表.将课表导出到excel里的功能他们已经实现了, ...
- javascript框架设计(读书笔记)
我觉得多看几本进阶的书 与其十本书读一遍,不如一本书读十遍 读书的启示: 读好书(看推荐) 精读(重复看) 能读厚书(javascript权威指南) Object.keys Object.keys=O ...
- Mysql系列（四） —— MySQL的Charset和Collation
本文转载自:再见乱码:5分钟读懂MySQL字符集设置 一.内容概述 在MySQL的使用过程中,了解字符集.字符序的概念,以及不同设置对数据存储.比较的影响非常重要.不少同学在日常工作中遇到的" ...
- SpringCloud面试题及答案
1. 什么是 spring cloud? spring cloud 是一系列框架的有序集合.它利用 spring boot 的开发便利性巧妙地简化了分布式系统基础设施的开发,如服务发现注册.配置中心. ...
- javascript异步编程学习及实例
所谓异步就是指给定了一串函数调用a,b,c,d,各个函数的执行完结返回过程并不顺序为a->b->c->d(这属于传统的同步编程模式),a,b,c,d调用返回的时机并不确定. 对于js ...
- Puppet自动化管理配置
Puppet:开源系统配置和管理工具 随着虚拟化和云计算技术的兴起,计算机集群的自动化管理和配置成为了数据中心运维管理的热点.对于 IaaS.Paas.Saas 来说,随着业务需求的提升,后台计算机集 ...
- 【转载】Windows系统电脑通过命令msinfo32查看系统信息
在Windows操作系统中,可以使用msinfo32的操作命令查看操作系统相关信息,通过msinfo32命令可以查看到系统摘要,包括硬件资源.组件.软件环境等系统信息.其中系统摘要包括冲突/共享.DM ...