Vuejs我的了解

Vuejs的开篇介绍

为什么学习Vuejs?

• 可能你的公司正要将原有的项目使用Vue进行重构。
• 也可能是你的公司新项目决定使用Vue的技术栈。
• 当然，如果你现在正在换工作，你会发现招聘前端的需求中，10个有8个都对Vue有或多或少的要求。
• 当然，作为学习者我们知道Vuejs目前非常火，可以说是前端必备的一个技能。

简单认识一下Vuejs

• Vue (读音 /vjuː/，类似于 view)，不要读错。
• Vue是一个渐进式的框架，什么是渐进式的呢？
  • 渐进式意味着你可以将Vue作为你应用的一部分嵌入其中，带来更丰富的交互体验。
  • 或者如果你希望将更多的业务逻辑使用Vue实现，那么Vue的核心库以及其生态系统。
  • 比如Core+Vue-router+Vuex，也可以满足你各种各样的需求。
• Vue有很多特点和Web开发中常见的高级功能
  • 解耦视图和数据
  • 可复用的组件
  • 前端路由技术
  • 状态管理
  • 虚拟DOM

Vue.js安装

• 方式一：直接CDN引入

<!-- 开发环境版本，包含了有帮助的命令行警告 --> 
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

• 方式二：下载和引入

开发环境 https://vuejs.org/js/vue.js 
生产环境 https://vuejs.org/js/vue.min.js

• 方式三：NPM安装

通过webpack和CLI的使用

Vuejs的简单使用

• 使用工具：WebStorm
  
• 代码展示

<div id="app">
	<h2>{{message}}</h2>
	<h2>{{name}}</h2>
</div>
<script src="../js/vue.js"></script>
<script>
	//vue展示数据
	const app = new Vue({
		el:"#app", //id
		data:{ //定义数据
			message:"你好",
			name:"世界"
		} 
	})
</script>

• 页面展示
  
• vue.js的下载
  

代码做了什么事情？

• 我们来阅读JavaScript代码，会发现创建了一个Vue对象。
• 创建Vue对象的时候，传入了一些options：{}
  • {}中包含了el属性：该属性决定了这个Vue对象挂载到哪一个元素上，很明显，我们这里是挂载到了id为app的元素上
  • {}中包含了data属性：该属性中通常会存储一些数据，这些数据可以是我们直接定义出来的，比如像上面这样。也可能是来自网络，从服务器加载的。
• 浏览器执行代码的流程：
  • 执行到div代码显然出对应的HTML
  • 执行JavaScript代码创建Vue实例，并且对原HTML进行解析和修改。
• 目前我们的代码是可以做到响应式的。
• 打开浏览器的开发者模式的console，来试一下 app.name = ‘中国’，直接可以看见页面会有不一样的效果。

Vue列表展示

• 代码块

<div id="app">
    <ul>
        <li v-for="item in movies">{{item}}</li>
    </ul>
</div>
<script src="../jsue.js"></script>
<script>
    //vue展示列表
    const app = new Vue({
        el:"#app",
        data:{
            movies: ['天下无贼','当幸福来敲门','古惑仔','无间道','大话西游']
        }
    })
</script>

• 页面展示
  
• 打开浏览器的开发者模式的console，来试一下 app.movies.push(‘速度与激情’)，直接可以看见页面会有不一样的效果。 当我们数组中的数据发生改变时，界面会自动改变。

Vue中的MVVM

• 首先ViewModel通过Data Binding让数据实时的在DOM中显示。
• 其次ViewModel通过DOM Listener来监听DOM事件，并且通过methods中的操作，来改变数据。

Vue实例传入的options

创建Vue实例的时候，传入了一个对象options，options中包含的选项之详细解析。
熟知的options选项：

Vue的生命周期

持续更新中…