vue——前端发展、vue介绍、mvvm模式、组件化开发、单页面开发、模板插值语法、文本指令、事件指令、属性指令

系列文章目录

---

---

一、前端发展

1.使用HTML(5)、CSS(3)、JavaScript(ES5、ES6)编写一个个的页面发送给后端(PHP、Python、Go、Java)后端嵌入模板语法，后端渲染完数据，返回数据给前端，在浏览器中查看

2.Ajax的出现，后台发送异步请求，Render+Ajax混合

3.单用Ajax（加载数据，DOM渲染页面），前后端分离的雏形

4.Angular框架的出现（1个JS框架）：出现了“前端工程化”的概念（前端也是1个工程、1个项目）

5.React、Vue框架：当下最火的2个前端框架（Vue：国人喜欢用，React：外国人喜欢用）

6.移动开发（Android+IOS） + Web（Web+微信小程序+支付宝小程序） + 桌面开发（Windows桌面）：前端 -> 大前端

7.一套代码在各个平台运行（大前端）：谷歌Flutter（Dart语言：和Java很像）可以运行在IOS、Android、PC端

8.在Vue框架的基础性上 uni-app：一套编码 编到10个平台

9.在不久的将来 ，前端框架可能会出现统一的框架

二、vue介绍

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

---

三、mvvm模式

m 对应数据层 一般数据来自于后端API接口

vm 数据与视图之间由vue生成的的一层，在这一层实质上是生成了一个虚拟的DOM文档，通过虚拟DOM文档实现数据的双向绑定

v 对应视图层 前端的vue中自定义的组件

---

四、组件化开发

vue可以开发一个个小的组件，小组件可以组装为一个应用组件，组件化开发主要是为了，让整个前端都是由小组件拼接起来的，这样可以提高组件的利用率，也能使代码可以随意拔插，达到类似树的结构

---

五、单页面开发

单页面开发的是基于vue的数据双向绑定实现的，用户可以在不刷新的页面的基础上，体验更多的内容

---

六、模板插值语法

插值语法插入的符合DOM语法的字符串只会显示为字符串，不会转换为DOM

<div id="div1">
	<p>数字型:{{number_variable}}</p>
    <p>数组型:{{list_variable}}</p>
    <p>对象:{{obj_variable}}</p>
    <p>布尔型:{{boolean_variable}}</p>
    <p>标签:{{label_variable}}</p>
</div>
<script>
    var vm = new Vue({ ## 此处为关键需要实例化一个Vue并赋值给vm也可以只实例化的Vue例如：new Vue({
        el:'#div1', ## 此处设置id将其变为vue组件
        data:{ ## 组件中的数据，一般为后端API传递过来的
            number_variable: 8,
            list_variable: [1,2,3,4,5],
            obj_variable: {'name':"kdq",'age':18},
            boolean_variable: true,
            label_variable: '<a href="https://www.baidu.com/">点击我去百度一下</a>',
        },
        method:{ ## 此处是编写事件的

        }
    })
</script>

---

七、文本指令

v-text 将值以字符串形式展示在标签中
v-html 将值以dom文档代码形式展示在标签中 （可以将符合html语法的字符串转换为dom文档内容）
v-show 根据值来控制该标签的dispaly属性
v-if 根据值来控制该标签是否存在于虚拟dom文档流（vm层的产物，每次虚拟DOM文档流产生变动都会替换DOM文档流）

<p v-text="label_variable"></p>
<p v-html="label_variable"></p>
<p v-show="boolean_variable">v-show</p>
<p v-if="boolean_variable">v-if</p>

---

八、事件指令

    <button @click="btn1">按钮1</button> 写法一直接@事件类型 比较常用
    <button v-on:click="btn1">按钮1</button> 写法二v-on:事件类型 

---

九、属性指令

v-bind:class/style 是完整写法
简写为： :class/style
针对于class推荐使用对象的写法
针对style推荐使用字符串写法

<p v-bind:class="cfont">class数组写法</p>
    <p v-bind:class="cfont1">class字符串写法</p>
    <p v-bind:class="cfont2">class对象写法</p>
    <p :style="sfont">style数组写法</p>
    <p :style="sfont1">style字符串写法</p>
    <p :style="sfont2">style对象写法</p>

var vm = new Vue({
        el:'#div1',
        data:{
            // class 使用
            cfont: ['font', 'color'], //class数组写法
            cfont1: 'font color', //class字符串写法
            cfont2: {'font':true, 'color':true}, //class对象写法
            // style 使用
            sfont: [{'font-size':"30px"}, {'color':'red'}], //style数组写法
            sfont1: 'font-size:30px;color:red', //style字符串写法
            sfont2: {'font-size':'30px', 'color':"red"}, //style对象写法
        },
    })