vue技术栈
vue技术栈
MVC、MVP、MVVM
定义
mvc
Model - 模型，数据保存
View - 视图 用户界面
Controller - 控制器 业务逻辑
mvvm框架？
M - Model
V - View
VM - ViewModel
采用 双向绑定（data-binding）：View的变动，自动反映在 ViewModel，ViewModel 会自动去更新 Model 数据，反之亦然（即当 Model 发生改变时也会自动反映到 ViewModel 上，触发 View 的自动更新渲染）
VUE
官网
现行两大版本：vue2.x vue3.x
vue架构中包含了mvvm…
Vue2.x 不支持 IE8 及以下版本，因为 Vue 使用了 IE8 无法模拟的 ECMAScript 5 特性(Object.defineProperty())
Vue2.x 底层使用 Object.defineProperty() 来实现 数据劫持
Vue3.x 底层使用 Proxy 来实现 数据代理。
用于构建用户界面的渐进式框架，核心库只关注视图层。
安装
使用 <script> 直接引入：
使用 <script src=""> 方式引入，会添加一个全局变量 Vue
两种版本：
开发版本: 包含完整的警告和调试模式
生产版本: 压缩混淆，不包含调试模式信息 vue.min.js
npm
$ npm install vue
vue-cli （常用）
使用
1.商品渲染
html
<!-- view视图界面 --> <div id="app"> <h1>购物车</h1> <h1>推荐商品:</h1> <ul> <!--for in 遍历数组 --> <li v-for="curr in products"> {{ curr.id }}-{{ curr.title }}-{{curr.price}}-{{curr.num}} <button>加入购物车</button></li> </ul> </div> <script src="./libs/vue.js"></script> <script> // 定义数组，保存推荐商品（模拟数据） const _products = new Array(8).fill(null).map((item, index, array) => { return { id: index + 1, title: '商品标题:' + (index + 1), price: (Math.random() * 100).toFixed(2), num:0, } }) //vue 创建一个新的 Vue 实例 const vm = new Vue({ el: '#app', //view,element data:{ //model products:_products, //推荐商品 }, computed:{ 属性一（）{ return ... },... }, methods:{ 方法一(){ },... } }) </script>
2.添加到购物车
<!-- view视图界面 --> <div id="app"> <h1>推荐商品:</h1> <ul> <li v-for="curr in products"> {{ curr.id }}-{{ curr.title }}-{{curr.price}}-{{curr.num}} <button v-on:click="addToCart(curr)">加入购物车</button></li> </ul> </div> <script src="./libs/vue.js"></script> <script> //vue 创建一个新的 Vue 实例 const vm = new Vue({ el: '#app', //view,element data: { //model products: _products, //推荐商品 cart: [], //购物车数组 }, methods: { //方法 //加入购物车 addToCart: function (curr) { // 如果当前商品已选购，则叠加数量 const product = this.cart.find(item => item.id == curr.id) if (product) { product.num++ } else { this.cart.push({ ...curr, }) } } } }) </script>
3.计算勾选商品总价
<!-- view视图界面 --> <div id="app"> <h1>购物车</h1> <ul> <li v-for="curr in cart"> <input type="checkbox" v-model="curr.checked"> {{ curr.id }}-{{ curr.title }}-{{curr.price}}-{{curr.num}} <button>删除商品</button> </li> </ul> <div> 合计商品总价：{{ total }} </div> <script src="./libs/vue.js"></script> <script> //vue 创建一个新的 Vue 实例 const vm = new Vue({ el: '#app', //view,element data: { //model products: _products, //推荐商品 cart: [], //购物车数组 }, computed:{ //计算属性 total(){ return this.cart.reduce((resault,curr,index,arr)=>{ return curr.checked?resault + (curr.price * curr.num):resault },0) } }, }) </script>
4.删除商品
<!-- view视图界面 --> <div id="app"> <h1>购物车</h1> <ul> <li v-for="curr in cart"> <input type="checkbox" v-model="curr.checked"> {{ curr.id }}-{{ curr.title }}-{{curr.price}}-{{curr.num}} <button v-on:click="removeCart(curr)">删除商品</button> </li> </ul> <script src="./libs/vue.js"></script> <script> //vue 创建一个新的 Vue 实例 const vm = new Vue({ el: '#app', //view,element data: { //model }, computed:{ //计算属性 } }, methods: { //方法 //从购物车移除 removeCart(curr){ this.cart = this.cart.filter(item=>item.id!==curr.id) } } }) </script>
vue沿用了mvvm特性：
声明式渲染
Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
<div id="app"> {{ message }} </div> <script src="./libs/vue.js"></script> <script> new Vue({ el: '#app', // View data: { // Model message: 'Hello Vue.js' }, }) </script>
现在数据和 DOM 已经被建立了关联，所有东西都是响应式的,示例如下
vue实例
const vm = new Vue({ el: '', data: {}, methods: {}, })
注意：在 data 中定义的数据会被挂载到 vm 这个 Vue 对象实例下（即可以直接通过 vm. 来调用 data 中的数据）。注意，在 data 中尽量不要定义以 $ 或 _ 开关的字段，因为可能和 Vue 对象自身的属性冲突（以 $ 或 _ 开头的数据，不会挂载到 Vue 实例下）
虽然没有完全遵循 MVVM 模型，但是 Vue 的设计也受到了它的启发。因此在文档中经常会使用 vm (ViewModel 的缩写) 这个变量名表示 Vue 实例。
当一个 Vue 实例被创建时，它将 data 对象中的所有的 property 加入到 Vue 的响应式系统中。当这些 property 的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。
但只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
$el $data $options
在 methods 中定义的方法内部，this 通常指向的是当前创建出的 Vue 实例对象本身（不要使用箭头函数）
vue–methods
<div id="app"> {{message}} <br> {{nodata}} <br> {{ meth1() }}<br> {{ meth2() }}<br> {{ meth3() }}<br> </div> <script src="./libs/vue.js"></script> <script> const vm = new Vue({ //选项 el: '#app', data: { message: 'nihao' }, methods: { meth1:function(){ console.log("meth1",this); return "method---1" //vue }, meth2() { console.log("meth2",this); return "method---2" //vue }, meth3:()=>{ console.log("meth3",this); return "method---3" // window，通常不使用箭头函数来书写 }, }, created() { //data外，无响应式渲染 this.nodata = "data外数据--不响应式渲染" } }) </script>
模板语法
所有 Vue.js 的模板都是合法的 HTML，所以能被遵循规范的浏览器和 HTML 解析器解析。
在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。
插值语法
“Mustache”语法 (双大括号)
文本
{{ expression }} <!-- 双大括号会将数据解释为普通文本，而非 HTML 代码 -->
注意，{{ }} 中包含的是 JS 的表达式，会进行 html 文本转义，主要是为了避免 XSS 攻击