这是我参与「第四届青训营 」笔记创作活动的的第9天
前言
什么是Vue
Vue是一个渐进式的框架
- 渐进式意味着你可以将Vue作为你应用的一部分嵌套其中
- Vue的核心库以及其生态系统
- Core + Vue-router + Vuex
如何使用vue
直接引入
vue分为开发版本和生产版本，开版本包含完成的警告和调试模式，适合研发过程使用，生产版本为提高安全性和效率则删除警告信息，下载方式如下：
开发版本： cn.vuejs.org/js/vue.js
生产版本： cn.vuejs.org/js/vue.min.…
使用开发版本，控制台会出现错误的提示，而生产版本不会
浏览器插件安装
Vue.js devtools是基于google chrome浏览器的一款调试vue.js应用的开发者浏览器扩展，可以在浏览器开发者工具下调试代码。在谷歌浏览器应用商店中搜索“vue.js”，然后在搜索结果中安装“Vue.js devtools”。
使用vue容器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vue01</title>
<!-- 引入下载的vue -->
<script type="text/javascript" src="./js/vue.js"></script>
</head>
<body>
<!-- 准备好一个容器 -->
<div id="root">
<h1>你好，{{name}}</h1>
</div>
<script>
// 阻止vue在启动时出现生产提示
Vue.config.productionTip = false;
//创建实例
new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指的容器使用
name: '栗山未来',
age: '19'
}
});
</script>
</body>
</html>
Vue设计框架
MVVM架构
MVVM是Model-View-ViewModel 的缩写，由 Model,View,ViewModel 三部分构成
- Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；
- View 代表UI 组件，它负责将数据模型转化成UI 展现出来，
- ViewModel 是一个同步View 和 Model的对象。它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
//创建vm实例
let vm = new Vue({
el: '#root', //el用于指定当前Vue实例为那个容器服务，值通常为css选择器字符串
data: { //data中用于存储数据，数据供el所指的容器使用
name: '栗山未来',
age: '19'
}
});
- MWM模型
- M：模型（Mode1）：data中的数据
- V：视图（View）：模板代码
- VM：视图模型（ViewModel）：Vue实例
- 观察发现：
- data中所有的属性，最后都出现在了vm身上。
- vm身上所有的属性及Vue原型上所有属性，在Vue模板中都可以直接使用。
