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 ...
随机推荐
- Guava 源码分析之Cache的实现原理
Guava 源码分析之Cache的实现原理 前言 Google 出的 Guava 是 Java 核心增强的库,应用非常广泛. 我平时用的也挺频繁,这次就借助日常使用的 Cache 组件来看看 Goog ...
- 2018-2019-2 20165315《网络对抗技术》Exp 8 Web基础
2018-2019-2 20165315<网络对抗技术>Exp 8 Web基础 一.实验内容 Web前端HTML 能正常安装.启停Apache.理解HTML,理解表单,理解GET与POST ...
- 【Gamma】 Phylab 发布说明
Phylab Gamma阶段发布说明 一.发布地址 网站:Phylab GitHub Release: WhatAHardChoice/Phylab Gamma版本 二.新功能 1. 控制台完全接入 ...
- React组件介绍与使用（父传子、子传父、兄弟传）
1.创建组件的方法 1.1.函数式无状态组件 1.1.1.语法 1 function myComponent(props) { 2 return 3 <div>Hello {pro ...
- 快速排序详解（C语言/python）
快速排序详解 介绍: 快速排序于C. A. R. Hoare在1960年提出,是针对冒泡排序的一种改进.它每一次将需要排序的部分划分为俩个独立的部分,其中一个部分的数比的数都小.然后再按照这个方法对这 ...
- docker compose 编排
Compose是Docker的服务编排工具,主要用来构建基于Docker的复杂应用,Compose 通过一个配置文件来管理多个Docker容器,非常适合组合使用多个容器进行开发的场景. 说明:Comp ...
- 如何在Typora中使用流程图
1.横向流程图源码格式: graph LR A[方形] -->B(圆角) B --> C{条件a} C -->|a=1| D[结果1] C -->|a=2| E[结果2] A- ...
- Excel批量添加不同的批注
Sub 批量添加不同批注() Dim rng As Range Dim i As String Range("A1:D1").ClearComments For Each rng ...
- Direct Buffer介绍
Direct Buffer 前言 上篇文章Buffer末尾中谈到堆内Buffer(Heap Buffer)和直接Buffer(Direct Buffer)的概念,但是却一笔带过,并未涉及其细节,这篇文 ...
- 50道Redis面试题及答案整理，史上最全！
在网上看到有关Redis的50道面试题,但是没有给出答案,之前我也在寻找这份Redis面试题的答案,今天特地把答案分享出来. 花了大量时间整理了这套Redis面试题及答案,希望对大家有帮助哈~ 弄明白 ...