vue画组织架构图 vue框架图

一、Vue概念

1.是一套用于构建用户界面的渐进式框架 -- 前端框架

2.自底向上逐层应用

3.数据驱动型框架

4.构建SPA应用 -- 单页应用程序

5.MVVM结构

6.作者：尤雨溪

7.上线时间：2014年2月

8.兼容性：IE8以上

9.版本：v2.×：v2.6.14 -- 只维护不更新

v3.×：v3.2.36 -- 维护更新

二、安装

1.使用<script>引入：1.下载后引入

2.使用CDN

2.使用NPM

3.使用vue-cli：vue的脚手架工具

三、基本语法

1.使用<script>标签引入vue后，Vue就被注册成了全局变量

2.组件：一个预定义选项的vue实例

3.vue应用：一个根实例和多个vue实例组成

4.创建根实例

var vm = new Vue({
    el:"#app", //挂载元素(vue的作用范围)
})

5.实例选项：

1.el：挂载元素(vue的作用范围) 注意：1.只能用在根实例 2.不能挂载到html或body上 2.data：实例的数据对象 -- 只有写在data当中的数据才能够在HTML中直接访问 注意：根实例上为对象；子实例中是一个函数，返回数据对象 3.methods：实例的方法(自定义) -- 对象格式,对象的属性名就是方法名,属性值就是方法体 4.生命周期钩子：本质是一个函数，由组件在实例化过程中自动调用 beforeCreate(),created(),beforeMount(),mounted(),beforeUpdate(),updated(),beforeDestroy(),destroyed()

6.实例方法/属性：属性和方法前有$

vm.$el：获取根实例绑定的el属性 vm.$mount()：手动绑定el属性 vm.$data：获取实例的数据对象

模板语法

1.作用：将DOM和vue中数据双向绑定

2.插值：1.{{msg}}：将msg作为字符串插入，标签之间

2.v-text：将数据作为字符串输出

3.v-html：将数据作为HTML内容插入

4.v-bind：将数据作为属性值插入

1.作为属性值绑定：val就是data中的变量 <div v-bind:attr="val"></div> 2.作为属性名绑定：attr和val都是data中的变量 <div v-bind:[attr]="val"></div> 3.简写 <div :attr="val"></div> 4.绑定多个属性值：ids,attr,title都是data中的变量 <div v-bind="{id:ids,[attr]:'myclass',title}"></div> 5.使用修饰符 <div :attr.prop="val"></div>

指令

1.是带有v-开头的特殊标签属性 -- 值变，DOM变

2.v-once：只渲染元素和组件一次 -- 没有参数

3.v-pre：跳过当前元素及子元素的编译 -- 没有参数

4.v-model：用来在表单控件或组件上创建双向绑定

1.绑定text的value属性,input事件 <input type="text" v-model="msg"> 2.修饰符： .lazy：将input事件更改为change事件 .number：将获取的input的值转换为number类型(value获取默认为string) .trim：过滤输入内容的前后空格 <input type="text" v-model.lazy.trim="msg">

5.v-cloak：隐藏{{}}直到模板编译完成

1.css中设置v-cloak样式 [v-cloak]{display:none} 2.在{{}}标签上使用v-cloak指令 <div v-cloak>{{msg}}</div>

6.v-on：绑定事件监听器

7.v-slot：提供具名插槽或需要接收 prop 的插槽

条件渲染

1.v-show：通过表达式的值真假，来切换元素的display属性--频繁切换

2.v-if：通过表达式的值真假，来渲染/不渲染内容

3.v-else-if：v-if的else-if块

4.v-else：v-if的else块

区别：v-show是通过display属性实现；v-if是渲染或不渲染元素

列表渲染

1.v-for：基于一个数组渲染一个列表,参数可以是数组，对象，数值，字符串，具有遍历器属性的值

<ul>
    <li v-for="(val,key,index) in/of list" :key="val.id"></li>
</ul>