深入浅出Vue基本语法：让你快速上手Vue框架（一）-阿里云开发者社区

一、 vue 项目重点概念介绍

1. 单页面应用程序

单页面应用程序指的是一个应用程序中只有唯一的一个 HTML 页面，所有的功能与交互都在这唯一的一个页面内完成。
单页面应用程序将所有的功能局限在一个HTML页面中，仅在该HTML页面初始化时加载相应的资源（HTML、JavaScript、CSS）。一旦页面加载完成了，单页面应用程序不会因为用户的操作而进行页面间的重新加载或跳转。
因为只有一个 html 页面，不需要页面间的跳转，而是利用JavaScript动态的变换HTML的内容，从而实现页面与用户的交互。

2. 单文件组件

vue的单文件组件是一种以.vue结尾的特殊的文件格式，vue工程化项目中不再有html的页面的概

念，一切皆为一个vue的单文件组件。它是不能被浏览器独立运行的，需要通过编译工具，编译为能被

浏览器解析的 js 文件执行。

3.数据驱动视图

数据的变化驱动视图的自动更新，是vue的一个特性。以前要想修改视图的数据，是通过js或者

jquery操作 dom，改变dom中的内容实现。现在只修改数据，数据改变，vue会自动渲染 dom更新，而不用我们再来操作 dom。

所以我们在vue项目中相比以前的jquery项目中要有思想上的改变：从以前操作 dom的思想转换为操作数据。

二、 vue 基本结构

参考 vue 官网 https://v2.cn.vuejs.org/v2/guide/

标准的 vue 文件结构分为三个部分，模板(template)、js(script)、样式(style)

基本结构如下：

<template>
<!-- 有且只有一个根节点 -->
   <div></div>
</template>
<script>
export default {
 // 数据
data() {
return {
    obj: '',
    arr: []
    };
  },
 // 生命周期
created() {
   this.init();
},
mounted() {
},
// 方法
methods: {
  init() {
   //...
   }
  }
};
</script>
<!-- scoped 声明私有样式：只在该组件下起作用 -->
<!-- lang="scss" 声明css扩展语言 -->
<style lang="scss" scoped></style>

1、template

其中模板只能包含一个父节点，即模板内部有且只有一个根结点。这是 vue单文件组件规范。

template类似于html部分。

2、script

vue通常用 es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

data：模版中用到的数据都来自data，数据驱动视图也就代表修改data中的数据，会引起视图的
更新。
created：在模板渲染成 html 前调用，即通常初始化某些属性值，然后再渲染成视图，调用method中的方法。
mouted：在模板渲染成 html 后调用，通常是初始化页面完成后，再对 html 的 dom 节点进行一些需要的操作，调用method中的方法。
method：用来定义 js 方法、事件等实现某些功能。

script标签内部结构顺序：
mixin > components > props > data > computed > watch > filter >生命周期钩子函数 >
errorCaptured > methods
生命周期钩子函数按其执行顺序书写：
beforeCreate > created > beforeMount > mounted
> beforeUpdate > updated > activated > deactivated > beforeDestroy > destroyed

3、style

样式通过style标签包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加

scoped，，也可使用css扩展语言 scss，默认 css，使用扩展语言需要声明lang属性，使用scss语言

三、 vue 常用指令介绍

1、内容渲染指令

（1）插值表达式 {{xxx}} —常用方式

用于解析标签体内容。{{xxx}}， xxx是 js表达式，且可以直接读取到data中的所有属性。

例子：

<template>
    <!-- 插值表达式 -->
    <div>{{ msg }}</div>
    <!-- 插值表达式{{}}对JavaScript 表达式支持，例如： -->
    <!-- 运算 -->
    {{ number + 1 }}
    <!-- 字符串拼接 -->
    {{ str + 'suffi'}}
    <!-- 三元表达式 -->
    {{ gender === '0' ? '男' : '女' }}
    <!-- js的字符串操作 -->
    {{ msg.substring(0,2) }}
</template>
export default { 
   data() {
   return {
    //属性名
      msg: '这是一段文字',
      number:0,
      str:'字符串',
      gender:'0'
    };
  }
};
</script>

（2）v-text

原样输出，替换标签内原有内容, 本质是innerText属性的修改

<template>
 <div>
<!-- v-text: 原样输出 替换标签内原有内容, 本质是 innerText 属性的修改 -->
  <div v-text="msg">msg:</div>
 </div>
</template>
<script>
export default {
   data() {
   return {
      msg: '<h1>Hello Vue</h1>'
    };
  }
};
</script>
<style lang="scss" scoped>
 //样式
</style>

输出：

<h1>Hello Vue</h1>

（3）v-html

更新元素的innerHTML，本质是innerHTML属性的修改。注意：内容按普通 HTML插入 - 不会作为

Vue模板进行编译。

例：

<template>
<div>
<!-- v-html: 把内容解析成HTML元素, 覆盖原有内容。 -->
<div v-html="msg">msg:</div>
</div>
</template>
<script>
export default {
data() {
return {
   msg: '<h1>Hello Vue</h1>'
   };
  }
};
</script>

输出：

Hello Vue

2、属性绑定指令v-bind

v-bind可简写为 : 动态地绑定一个或多个属性。在绑定 ``class 或style ```属性时，支持其它类型的值，如数组或对象。

例：

<!-- 绑定属性名imageSrc -->
<img v-bind:src="imageSrc">
<!-- 简写 -->
<img :src="imageSrc">

3、重点说下class和style绑定

（1）绑定class

对象语法： v-bind:class 设置一个对象，可以动态地切换class。

例：

当isActive或者 hasError变化时，class列表将相应地更新。例如，如果 hasError的值为

true，class列表将变为"static active text-danger" 。

<template>
<!-- 动态:class可以与普通class共存 -->
<div class="static" :class="{ active: isActive, 'text-danger': hasError }">一段
文字</div>
</template>
<script>
export default {
   data() {
     return {
       isActive: true,
       hasError: false
    };
  } 
};
</script>

渲染结果为：

<div class="static active">一段文字</div>

数组语法：当需要应用多个 class 时，可以使用数组语法，给 :class 绑定一个数组，应用一个
class 列表

例：

<template>
    <!-- :class绑定一个数组 -->
    <div :class="[activeClass, errorClass]">一段文字</div>
</template>
<script>
export default {
  data() {
    return {
    activeClass: 'active',
    errorClass: 'text-danger'
   };
  }
};
</script>

渲染结果为：

<div class="active text-danger"></div>

如果你也想根据条件切换列表中的 class，可以用三元表达式：

<!-- 当数据isActive为真时，样式activeClass才会被应用。这样将始终添加 errorClass -->
<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>

class有多个条件时，这样写有些繁琐。所以在数组语法中也可以使用对象语法：

<div v-bind:class="[{ activeClass: isActive }, errorClass]"></div>

（2）绑定内联样式style

对象语法：

v-bind:style的对象语法十分直观—看着非常像CSS，但其实是一个JavaScript对象。 CSS名可以用驼峰式或短横线分隔 (kebab-case，短横线分隔要用引号括起来) 来命名：

例子：

<template>
   <!-- 绑定属性activeColor值和fontSize值，渲染样式-->
   <div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>
</template>
<script>
export default {
   data() {
      return {
        activeColor: 'red',
        fontSize: '20'
     };
   }
};
</script>

直接绑定到一个样式对象通常更好，这会让模板更清晰：

<template>
   <!-- 绑定styleObject对象，渲染样式-->
   <div :style="styleObject"></div>
</template>
<script>
export default {
   data() {
      return {
        styleObject: {
           color: 'red',
           fontSize: '14px'
      },
      styleObjecttwo: {
      background: '#ccc'
     }
   };
 }
};
</script>

数组语法：将多个对象放入数组中绑定

<div v-bind:style="[styleObject,styleObjecttwo]"></div>

3、事件绑定指令v-on

v-on为元素绑定监听事件
语法：v-on:事件名=“函数名”，简写：@事件名=“函数名”
语法的"函数名"代表了在方法methods中定义的回调函数，v-on绑定的事件触发后， vue会去实例
对象的 methods 中找对应的回调函数可以使用修饰符，如 v-on:事件名.once="函数名"；
也可以使用@事件名='函数名($event)'来获取事件对象

用在普通元素上时，用于监听原生Dom事件。用在自定义元素组件上时，也可以监听子组件触发
的自定义事件。

事件修饰符列表：

事件修饰符	示例	示例说明
`.stop`	```@click.stop``	阻止单击事件冒泡
`.prvent`	`@submit.prevent`	阻止事件的默认行为
`.once`	`@click.once`	规定该事件只会触发一次

按键修饰符列表：

事件修饰符	示例	说明
.enter	@click.enter	回车键
.delete	@click.delete	delete键和退格键
.esc	@click.esc	esc键
.space	@click.space	空格键

例 @click.once修饰符事件只会触发一次：

<template>
  <div>
    <el-button type="primary" @click="clickOnFn">我是按钮-简写</el-button>
    <el-button type="primary" @click.once="clickOneFn">我是按钮-.once</el-button>
   </div>
</template>
<script>
export default {
      data() {
        return {
           msg: ''
      };
 },
      methods: {
      //绑定事件
        clickOnFn() {
          this.$message({
           message: '按钮',
           type: 'success'
         });
  },
       //绑定事件，只调用一次
        clickOneFn() {
          this.$message({
            message: '只调用一次',
            type: 'success'
            });
     }
   }
};
</script>

4、双向数据绑定指令v-model

在表单控件或者组件上创建双向绑定。

例：

<template>
<div>
<!-- 视图发生改变→对应的数据发生改变：用户在输入框里输入的内容会被msg变量接下来，同时也将
动态更新在p标签的内容里。-->
<input v-model="msg" />
<p>{{ msg }}</p>
</div>
</template>
<script>
export default {
     data() {
       return {
       msg: ''
      };
    }
};
</script>