您的位置：首页 > Web前端 > Vue.js

Vue的基本使用

2019-10-20 22:55 169 查看

ES6的基本用法

let 命令

let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。

{
let a = 10;
var b = 1;
}

a // ReferenceError: a is not defined.
b // 1

特点：

局部作用域

不会存在变量提升

变量不能重复声明

const 命令

const声明一个只读的常量。一旦声明，常量的值就不能改变。

const PI = 3.1415;
PI // 3.1415

PI = 3;
// TypeError: Assignment to constant variable.

特点：

局部作用域

不会存在变量提升

不能重复声明，只声明常量(不可变的量)

模板字符串

# tab键上面的反引号 ${变量名}来插值
let name = '未来';
let str = `我是${name}`

箭头函数

ES6 允许使用“箭头”（=>）定义函数。

var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = function(num1, num2) {
return num1 + num2;
};

如果箭头函数的函数体部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。

var sum = (num1, num2) => { return num1 + num2; }

vue的基本用法

vue的介绍

vue的基本引入和创建

下载

CDN方式

官网下载

引包

实例化

<div id="app">
{{ message }}
</div>

//2.实例化对象
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})

vue的模板语法

可以插入任何你想插入的内容，除了 if-else if-else 用三元运算符代替

<!--模板语法-->
<h2>{{ msg }}</h2>
<h3>{{ 'hhahda' }}</h3>
<h3>{{ 1+1 }}</h3>
<h4>{{ {'name':'alex'} }}</h4>
<h5>{{ person.name }}</h5>
<h2>{{ 1>2? '真的': '假的' }}</h2>
<p>{{ msg2.split('').reverse().join('') }}</p>

vue的思想 = 数据驱动视图

vue的基本指令

v-text和v-html

v-text相当于innerText
v-html相当于innerHTML

双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html指令：

<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>

v-if和v-show

v-show 相当于 style.display

v-if和v-show的区别:

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中所有事件

简写： v-bind:src 等价于 :src v-on:click 等价于 @click

<!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遍历列表

v-for 可以遍历列表，也可以遍历对象
在使用vue的 v-for 指令的时候，一定要绑定 key,避免vue帮咱们计算DOM

<!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">
<ul v-if="data.status === 'ok'">
<!--v-for的优先级是最高的     diff算法-->
<li v-for = '(item,index) in data.users' :key="item.id" >
<h3>{{ item.id }} -- {{ item.name }} -- {{ item.age }}</h3>
</li>
</ul>
<div v-for = '(value,key) in person'>
{{ key }}-----{{ value }}
</div>
</div>
<!--1.引包-->
<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: 48}
]
},
person:{
name:'alex'
}
}
},
methods: {}

})
</script>

</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： Vue.js

相关文章推荐

新的分享

章节导航