Vue入门-初体验

vue是什么？

Vue（读音 /vjuː/, 类似于 view）是一个构建数据驱动的 web 界面的渐进式框架。采用自底向上增量开发的设计。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

官网：https://cn.vuejs.org/

• 什么是渐进式框架：借鉴网上大牛的话，加上自己理解的就是对于开发者要求和约束比较低这样一种使用方式。相对于和它影响力同级别的React、Angular 两个非渐进式框架，Vue相对于这两个强约束的框架来说，不需要去学习他们所要求的东西，就可以直接使用，但是Vue只是实现了自己的基础功能，没有其他两个框架的功能完善。但是Vue非常灵活，我们可以把项目中的某些组件用Vue，也可以把Vue当做其他两个框架来使用。扩展性强，对于使用者的要求相对于比较低。

大牛的说法：
在我看来，渐进式代表的含义是：主张最少
每个框架都不可避免会有自己的一些特点，从而会对使用者有一定的要求，这些要求就是主张，主张有强有弱，它的强势程度会影响在业务开发中的使用方式。
比如说，Angular，它两个版本都是强主张的，如果你用它，必须接受以下东西：
必须使用它的模块机制- 必须使用它的依赖注入- 必须使用它的特殊形式定义组件（这一点每个视图框架都有，难以避免）
所以Angular是带有比较强的排它性的，如果你的应用不是从头开始，而是要不断考虑是否跟其他东西集成，这些主张会带来一些困扰。
比如React，它也有一定程度的主张，它的主张主要是函数式编程的理念，比如说，你需要知道什么是副作用，什么是纯函数，如何隔离副作用。它的侵入性看似没有Angular那么强，主要因为它是软性侵入。
Vue可能有些方面是不如React，不如Angular，但它是渐进的，没有强主张，你可以在原有大系统的上面，把一两个组件改用它实现，当jQuery用；也可以整个用它全家桶开发，当Angular用；还可以用它的视图，搭配你自己设计的整个下层用。你可以在底层数据逻辑的地方用OO和设计模式的那套理念，也可以函数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做不该做的事，仅此而已。
渐进式的含义，我的理解是：没有多做职责之外的事

Vue 特性

• 轻量级
  Vue是一个轻量级的框架，不依赖其他前端框架或者基础库，独立
• 数据绑定
  数据绑定方便简单
• 指令
  内置指令统一为(v—*)，也可以自定义指令，通过对应表达值的变化就可以修改对应的DOM
• 插件化
  Vue.js核心不包含Router[路由]、AJAX、表单验证等功能，但是可以非常方便地根据需要加载对应插件。
• 组件化
  组件可以扩展HTML元素，封装可复用的代码，允许我们使用小型、自包含和通常可复用的组件构建大型应用

Vue的安装【其实就是一个Vue.js文件】
下载地址：https://cn.vuejs.org/v2/guide/installation.html
官网给了我们两个版本，开发时候建议使用开发版本，项目上线再使用生产版本。

那么我们就先来一个小例子了解一下Vue：

<div id="app">
		//Vue中的表达式为{{  }}
        <h1>{{message}}</h1>
        {{say()}}
     </div>

	<!-- 引入vue.js文件 我这里是我自己的路径，你们放你们自己下载的js保存路径 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		<!-- 创建一个Vue实例 -->
	  var app = new Vue({
	  	//根据id选择器**挂载**到对应的div标签，也可以使用类选择器
		  el:"#app",
		  //需要显示的数据【vue实例的数据，data是一个对象】
		  data:{
			  message:"hello vue"
		  },
		  methods:{
		  	//里面可以定义函数|方法
		  	say:function(){
					//this指向当前对象，当前app对象
					return "hello!";
				}
		  }
	  });
	</script> 

VueJS表达式

• 表达式语法

  • VueJS表达式写在双大括号内：{{ expression }}
  • VueJS表达式把数据[Vue实例里面的data]绑定到 HTML
  • VueJS将在表达式书写的位置=={{这里面}}=="输出|展示"数据
  • VueJS表达式 很像 JavaScript 表达式：它们可以包含文字、运算符和变量

• 简单的表达式

  • 普通运算

<div id="app">
        <!--简单表达式  -->
        <h1>{{5+5}}</h1>
        <!-- +:运算，字符串连接 -->
        <h1>{{5+"v5"}}</h1>
        <h1>{{5+"5"}}</h1>
        <!-- -：减法 -->
        <h1>{{"5"-"5"}}</h1>
        <h1>{{5*5}}</h1>
        <!-- *:乘 -->
        <h1>{{"5"*"5"}}</h1>
        <!-- / 除-->
        <h1>{{5/5}}</h1>
        <h1>{{5/5}}</h1>
     </div>

	<!-- 引入vue文件 -->
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
	  var app = new Vue({
		  //挂载到id=app元素上
		  el:"#app",
		  data:{},
		  methods:{}
	  });
	</script>

• 三目运算

<div id="app">
		<!--三目运算  -->
		{{ show1?"真":"假"}}
	</div>
	<script type="text/javascript" src="js/vue/vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({
			el : "#app",
			data : {
			//vue中的真假和js一样；false，null，NaN，undefind，""都表示假，其余的都是真
				show1 : true
			}
		});
	</script>

• 对象操作

 <div id="app">
    {{user}}<br/>
    {{JSON.stringify(user)}}<br/>
    {{user.toString()}}<br/>
    {{user.name}}<br/>
    {{user.age}}<br/>
    {{user.getAge()}}<br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var user = {
        name: "张三",
        age: 29,
        getAge: function () {
            return this.age
        },
        toString:function(){
            return "姓名:"+this.name+",年龄:"+this.age;
        }
    };
    var app = new Vue({
        el: "#app",
        data: {
            user: user
        }
    });
</script>

• 数组操作

<div id="app">
    {{hobbys}}<br/>
    {{hobbys[0]}}<br/>
    {{hobbys.length}}<br/>
    {{hobbys.toString()}}<br/>
    {{hobbys.join("------")}}<br/>
</div>
<script type="text/javascript" src=“js/vue/vue.min.js”></script>
<script type="text/javascript">
    var app = new Vue({
        el: "#app",
        data: {
            hobbys:["打游戏","踢足球",'泡MM',"泡GG"]
        }
    });
</script>