Vue基础

Vue概述

直接贴官网：https://cn.vuejs.org/index.html

在使用 Vue 时，我们推荐在你的浏览器上安装 Vue Devtools(Chrome)。它允许你在一个更友好的界面中审查和调试 Vue 应用。

安装完这个插件后，在打开通过Vue编写的页面时，在控制台即可进行调试。

Vue的基本使用

Vue的基本使用步骤：

1. 需要提供标签用于填充数据
2. 引入vue.js库文件
3. 使用vue语法
4. 将vue提供的数据填充到标签里

引入可以直接使用CDN来加载最新版本

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

插值表达式

用{ {}}来表示，中间可以进行一些表达式的计算等

<div id="box">{
  { value }}</div>
<div>{
  { 1+3 }}</div>

在js中导入vue.js库后创建vue实例

var vm = new Vue({
   
	el:"#box",
	data:{
   
		value:"Hello World!",
	},
});

结果

<div id="box">{
  { value }}</div>  // Hello Word!
<div>{
  { 1+3 }}</div>  // 4

指令

指令的本质是自定义属性

数据绑定指令

指令	描述
v-text	填充纯文本，相比插值表达式会更简洁
v-html	填充HTML片段，但存在安全隐患，容易受XSS攻击
v-pre	填充原始信息，不对插值表达式进行解析，跳过编译过程
v-model	对数据双向绑定，可以通过v-bind和v-on实现

事件绑定指令

指令	描述
v-on:事件名	用于给该元素绑定指定的处理事件
@事件名	v-on:的简写形式

<div id="box">
	<div v-on:click="add($event)">{
  { num }}</div>
</div>

var vm = new Vue({
   
	el:"#box",
	data:{
   
		num:0,
	},
	methods:{
   
		add: function(event){
   
			this.num++;	
		},
	}
});

属性绑定指令

<div id="box">
	<a v-bind:href="url"></a>
	<!-- v-bind:简写 -->
	<a :href="url"></a>
</div>

var vm = new Vue({
   
	el:"#box",
	data:{
   
		url:"http://www.baidu.com",
	}
});

样式绑定

对象语法和数组语法可以结合使用

对象语法

css

.active {
   
	background: #f00;
}

html

<!-- 这里表示active样式是否存在取决于isActive的值是true还是false -->
<!-- 含有多个样式时用逗号隔开 -->
<div v-bind:class="{ active:isActive }">内容</div>

在Vue实例中设置isActive的值

data:{
   
	isActive:true;
}

数组语法

<div v-bind:class="[activeClass]">内容</div>

data:{
   
	activeClass:"active",
}

事件修饰符

<!-- .stop阻止冒泡，原生js为e.stopPropagation() -->
<div v-on:click.stop="handler()">内容</div>
<!--.prevent阻止默认行为，原生js为e.preventDefault()-->
<a href=