Vue-基础使用

一、概述

1.1 Vue.js是什么？

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

1.2 如何引入vue?

这里介绍使用script标签进行引入。

	<script src="js/vue.js"></script>

安装教程: https://www.runoob.com/vue2/vue-install.html.

二、基本语法

2.1 如何创建Vue应用？

语法如下：

	let vm = new Vue({
   
		el:"",	//全称  element（元素）
		data:{
   	
				//data 用于定义属性
		}
	)

参数	类型	作用
el	字符串	配置控制的元素—表示vue要控制的区域，值为CSS选择器
data	对象	存放要用到的数据，数据为响应式
methods	对象	用于定义的函数，可以通过 return 来返回函数值

2.2 如何声明式渲染？

使用插值表达式：{ { }}
能存放的类型有：数字、字符串、数组、对象、表达式

案例：

	<div id="app">
        <h3>姓名：{
   {
    name }}</h3>
        <h3>年龄：{
   {
    age }}</h3>
        <h3>性别：{
   {
    sex }}</h3>
        <h3>地址：{
   {
    address() }}</h3>
    </div>
    <script>
        let vm = new Vue({
   
            el: "#app",//表示vue要控制的区域，值为CSS选择器 
            data: {