vuejs介绍

什么是vuejs

vuejs是一套用于构建用户界面的渐进式框架（一个前端框架）
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue 学习起来非常简单，本教程基于 Vue 2.1.8 版本测试。

vue 的安装

1、直接在官网下载，然后用<script></script>标签引入，Vue 会被注册为一个全局变量，我们就可以用了
2、用 npm 下载，引用方式如上
3、使用 cdn 直接引入<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> ，但是这个有一个问题，那就是当你没网的时候，这个就不能用了
	补充：CDN全称:Content Delivery Network或Content Ddistribute Network，即内容分发网络，我们在有网的情况下，可以直接使用绝对路径来使用
4、命令行工具cli：Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架，在学习了基本的vue使用之后，我们就会用它

vuejs 的基本使用

1、引入( 这里用的是直接路径引用 )：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2、定义一个vuejs管理的区域，在它管理的区域，可以使用vuejs特性，可以使用插值表达式，把vuejs管理的数据放在页面

			//V （view 视图）
			<div id="box">
					//<!--1.插值表达式 2. 小胡子语法 Mustache -->
			  		{{ title }}
    		</div>

3、实例化：

//vm 实例对象叫做 C controller，但是在 vuejs 里面更乐于叫做 VM(ViewModel 起的是有个视图和模型的连接作用。如果模型里面有数据，可以通过vuejs放置在页面，如果视图上面数据发生变化，可以使用 vuejs进行收集，赋值到模型上面，我们把这种特性叫做双向数据绑定。)
 // 方向一： 模型到视图变化
 // 方向二： 视图到模型的变化
 //传递一个参数：对象，对象存在两个属性：1. el 选择器，代表 vuejs 管理的区域 2. data 代表是vuejs可以操作的数据
    		var vm = new Vue({
		        el: '#box',
		        //下面的数据：叫做 M（model 模型）
		        data:  {
		        //这里的值将会传给vue管理区域的插值表达式里
		            title: 'hi vuejs!',
		        }
		    });

例子

<div id="box">
	<!--这里的{{ name }}会被替换成lili-->
    <p>{{ name }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili"
        }
    })
</script>

MVVM 的理解

	前端对MVC一种单独的解读。也是一种分层开发的思想体现
	MVVM更适合于在后端的开发，而在前端，我们将它解读为MVVM

vuejs 基本插值表达式使用

在之前的例子里面，我们已经用过插值表达式了，插值表达式除了可以写模型变量 1. 还可以写什么 2. 模型变量还可以是哪些数据类型？
1. 字面量 123 abc 2. 四则运算 3. 逻辑运算 4. 三目 5. 全局函数

<div id="box">
    {{ title }}
    <hr>
    <!--插值表达式除了可以写模型变量 1. 还可以写什么 2. 模型变量还可以是哪些数据类型？-->
    <!--1. 字面量 123 abc  2. 四则运算 3. 逻辑运算 4. 三目 5. 全局函数 -->
    <hr>
    <h2>字面量</h2>
    <p>{{ 'abc' }}</p>
    <p>{{ 123 }}</p>
    <p>{{ true }}</p>
    <hr>
    <h2>四则运算</h2>
    <p>1+1</p>
    <!--插值表达式提供一种js 语境，可以执行简单的js代码-->
    <p>{{ 1 + 1 }}</p>
    <p>{{  'hi ' + ' world!'  }}</p>
    <p>{{ 10 - 2 }}</p>
    <hr>
    <h2>逻辑运算</h2>
    <p>与或非</p>
    <p>{{ true && false }}</p>
    <p>{{ true || false }}</p>
    <p>{{ !false }}</p>
    <hr>
    <h2>三目</h2>
    <p>{{ 20 > 18 ? '成年' : '未成年' }}</p>
    <hr>
    <h2>全局函数</h2>
    <p>{{ Math.random() }}</p>
    <p>{{ parseInt(12.23) }}</p>
    <hr>
    <h2>写完整的js代码</h2>
    <!--<p>{{ var a =12; }}</p>-->
    <hr>
    <hr>
    <p>
        <!--模板引擎的底层原理使用的是什么？-->
        <!-- 正则 + 替换 -->
        <!--点-->
        {{ title }}
    </p>
    <hr>
    <h2>模型变量的其他类型</h2>
    <p>字符串：{{ title }}</p>
    <p>数字：{{ number1 }}</p>
    <p>布尔值：{{ isBoy }}</p>
</div> 

2. 模型变量还可以是哪些数据类型？
   还可以是数组和对象

<div id="box">
    <p>{{ arr }}</p>
    <p>{{ obj }}</p>
</div>
<script>
    var vm = new Vue({
        el: "#box",
        data: {
            name: "lili",
            arr: [1,2,4,56,7],
            obj: {id: 1, name: "xiaoxiao"}

        }
    })
 </script>  

但是像上面那种形式的话，只会把整个数组或者对象都取出来，而更多的时候，我们想要的是其中的一个或者几个，或者遍历数组或者对象，这时候我们就要用到指令了