Vue学习笔记（1）

前言

本着多多学习的想法，我也开始系统的进行vue的学习，之前了解过一些，也做过一些小的项目，但始终没有体系的整体过一遍，终究只是皮毛。所以从今天开始我的VUE学习之旅。
笔记内容参考：vue官方文档 https://cn.vuejs.org/ 及其一些网络资源文献

与angular比较

1.vue仅仅是mvvm结构中的view层，一个如同jQuery的工具库，而不是框架。而angular是一个框架。
2.vue的双向邦定是基于ES5 的 getter/setter来实现的，而angular而是由自己实现一套模版编译规则，需要进行所谓的“脏”检查，vue则不需要。因此，vue在性能上更高效，但是代价是对于ie9以下的浏览器无法支持。
3.在 vue 中指令和组件分得更清晰。指令只封装 DOM 操作，而组件代表一个自给自足的独立单元 —— 有自己的视图和数据逻辑。在 angular 中两者有不少相混的地方。
4.在 API 与设计两方上 vue比 angular 简单得多，
5.vue更灵活，能适用于各种项目，而angular必须严格要求遵守规则
6.angular指令的前缀是ng-，而vue的前缀是v-

安装

可尝试通过以下方式进行引入：
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
	{{ message }}
</div>

var app = new Vue({
el:'#app',
data:{
message:"Hello World"
}

})

这样的操作使得数据与DOM进行了关联，现在我们所有的东西都是响应式的。如何证明呢？我们打开控制台，修改add.message的值，可以看到页面上会有相应的改变。

除了文本插值，我们还可以像这样绑定元素特性

<div id="app-2">
	<span v-bind:title="message">
		鼠标悬停几秒查看动态绑定的提示信息
	</span>
</div>

var app2 = new Vue({
	el:'app-2',
	data:{
	message:"页面加载与"+new.Date().toLocalsString();
	}
})

我们在这里遇到一个新东西（其实也不是什么新鲜东西，这玩应就是指令）。
v-bind特性我们称之为指令。前面加上v-以表示它是vue提供的特殊特性。
其实也没什么好说的，在angular中指令就是ng-****

条件与循环

控制元素的显示与隐藏：

<div id="app-3">
	<p v-if="seen">只有你能看见我</p>
</div>

var app3 = new Vue{(
	el:'app-3',
	data:{
		seen:true
	}
)}

如果在控制台输入app3.seen = false,你就看不见咯。

除此之外，v-for还可以绑定一组数组数据用来渲染项目列表

<div>
	<ol>
		<li v-for="todo in todos" >
			{{todo.text}}
		</li>
	</ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。

处理用户操作

为了用户与我们的应用进行交互，我们可以用v-on指令添加一个事件监听器，可以通过他来调用在vue实例中定义的方法：

<div id="app-5">
	<p>{{ message }}</p>
	<button v-on:click="reverseMgs">反转消息</button>
</div>

var app5 = new Vue{(
	el:"#app-5",
	data:{
		message:"hello vue!"
	},
	methods:{
		reverseMgs:function(){
		 this.message = this.message.split('').reverse().join();
		}
	}
)}

vue还提供了v-model指令，用来提供表单输入与应用状态之间的双向绑定

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

组化建应用构建

组件数用于页面复用，这点比较好理解吧。
首先，我们先注册一个组件：

// 定义名为 todo-item 的新组件
Vue.component("todo-item",{
	template:'<li>这是一个待办项</li>'
})

var app = new Vue(...);

现在可以用它来构建另一个组件模板：

<ol>
	<todo-item></todo-item>
</ol>

但是这样做会让我们渲染相同的文本，这样一点都不酷。
我们应该能从父作用域将数据传到子作用域才对。
让我们来修改一下组件的定义，使之能够接受一个 prop：

Vue.component('todo-item', {
  // todo-item 组件现在接受一个
  // "prop"，类似于一个自定义特性。
  // 这个 prop 名为 todo。
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

现在，我们可以利用v-bind指令将待办项传到循环输出的每一个组件

<div id="app-7">
	<ol>
		<todo-item
		v-for="item in groceryList"
		v-bind:todo="item"
		v-bind:key="item.id"
		>
		</todo-item>
	</ol>
</div>

Vue.component('todo-item',{
	props:["todo"],
	temlate:'<li>{{ todo.text}}</li>'
})

var app = new Vue({
	el:"app-7",
	data:{
 		groceryList: [
	      { id: 0, text: '蔬菜' },
     	  { id: 1, text: '奶酪' },
     	  { id: 2, text: '随便其它什么人吃的东西' }
   	 ]
	}
})