Vue开篇
介绍
官网地址：https://cn.vuejs.org/
创作者:尤雨溪
最新稳当版本：2.6.11
目前市面上大部分是已2.x版本为基础进行开发，相比较1.x来说有着很深远的进步
架构特点：相比较于react 学习成本更低，适用于中小企业，渐进式架构（Vue渐进式-先使用Vue的核心库，再根据你的需要的功能再去逐渐增加加相应的插件）
核心内容：
（1）MVVM双向绑定
（2）vue router 路由
（3）服务端渲染（条件渲染，列表渲染）
（4）组件（组件注册，组件间通信）
起步语法及MVVM双向绑定
安装vue
（1）npm方式安装vue
npm install vue
（2）在线js方式引入
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
指定某版本在线引入
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
基本语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
{{JS表达式}}
-->
<div id="app">
<input v-model="listen" id="toggle-all" type="checkbox">
<h3>1、{{}}双大括号输出文本内容</h3>
<!-- 文本内容 -->
<p>{{message}}</p>
<input type="text" v-model="message">
<p>{{score + 1}}</p>
<h3>2、 一次性插值 v-once </h3>
<span v-once>{{message}}</span>
<h3>3、指令输出真正的 HTML 内容 v-html</h3>
<p>双大括号：{{contentHtml}}</p>
<!--
v-html:
1. 如果输出的内容是HTML数据，双大括号将数据以普通文本方式进行输出，
为了输出真正ＨＴＭＬ的效果，就需要使用v-html 指定
2. 为了防止 XSS 攻击
-->
<p>v-html: <span v-html="contentHtml"></span></p>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
message: 'hello vue',
score: 100,
contentHtml: `<span style="color:red">此内容为红色字体
<script>alert('hello')<\/script>
</span>`,
imgUrl: 'https://cn.vuejs.org/images/logo.png',
num: 10
}
})
</script>
</body>
</html>
浏览器运行效果：当我们在输入框中输入文字时 p标签的内容也会相应改变，这就是vue的特点之一：双向数据绑定通过v-model绑定,{{}}进行输出
在script代码块中，我们先实例化了vue对象 el:’#app’ 的意思是说将vue对象指定到dom元素id为app的元素上，data中存放初始化对象数据，{{score+1}}会自动进行js运算并输出，如果想输出html纯字符就用v-model 如果想输出html内容 使用v-html,使用v-once时候大括号中的内容不会随着输入框的值改变而改变
Vue指令篇
上述其实已经提及了一部分vue的指令：如v-model,v-html,v-once
下面我们学习v-if ,v-on,v-bind
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.active {
width: 100px;
height: 100px;
background: green;
}
</style>
<body>
<div id="app">
<div v-bind:class="{ active: isActive }"></div>
<p v-if="seen">seen</p>
<p>Vue好学吗</p>
<template v-if="ok">
<p>好学</p>
</template>
<template v-if="!ok">
<p>不好学</p>
</template>
<button @click="change">点击</button>
</div>
<script src="./node_modules/vue/dist/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
isActive: true,
seen: true,
ok: true
},
methods: { // 指定事件处理函数 v-on:事件名="函数名" 来进行调用
change: function() { //定义了change函数
this.ok= !this.ok
}
}
})
</script>
</body>
</html>
首先是class样式绑定(v-bind:也可简写为:)，若data中的isActive为false则不显示active这个样式,再往下 seen这个div是由v-if和data中的seen一起控制的显示或者隐藏，再往下button按钮@click是v-on:click的简写形式，点击会出发vue对象methods中的相应方法从而改变data中ok的值。