Vue入门（一）之view层语法

正式进入Vue的学习了，话不多说，直切主题！

1、vue介绍

是一套用于构建用户界面的渐进式框架。

更多详细信息可前往官网查看。

2、vue框架的两大核心

数据驱动和组件化。

• 数据驱动
  通过控制数据的变化来改变（驱动）DOM。
• 组件化
  类似于封装，提高代码复用率。

3、认识MV*模式

• MVC架构模式

  M：model，模型，主要完成业务功能，比如数据库的增删改查

  V：view，视图，主要负责数据的显示（HTML+CSS）

  C：controller，控制器，主要负责每个业务的核心流程，

优点：耦合度低、复用性高、生命周期成本低、部署快、可维护性高、
缺点：由于模型和视图要严格的分离，调试应用程序麻烦。

• MVP架构模式
  MVP模式是MVC模式的一种延伸。

  M：model，模型，主要完成业务功能，，数据库的增删改查
  V：view，视图，主要负责数据的显示
  P：Presenter，负责业务流程的逻辑的处理，Presenter是从Model中获取数据并提供给View的层，Presenter还负责处理后端任务。

• MVVM架构模式
  vue就是MVVM模式
  与MVP模式基本相同，不同的是把Presenter改名为ViewModel，并且MVVM采用数据双向绑定的方式。

mvvm示意图

4、vue语法（view层）

4.1、插值表达式

 格式：{{变量|属性名|表达式|函数调用等等}}；//双花括号

 <div id = "box">
      <p>{{ msg }}</p>
 </div>

//实例化一个vue对象
let vm = new Vue({
      el: "#box", //控制的html代码块
      data: {
          msg: "我的vue",//传送的msg的内容
      }
});

这种写法也叫作：声明式渲染，即：只需要告知vue，数据在何处显示。

4.2、内容指令

指令就是html标签的自定义属性。

• v-text="数据名"

  动态添加元素的内容，相当于innerText。

• v-html="数据"

  动态添加元素的内容，可识别标签，相当于innerHTML。

  注意：内容指令是写在标签属性的位置。

<div class="box">
        <p>{{meg}}</p>
        <p v-text="p_iner">第一个v-text</p>
        <p v-html="p_iner2"></p>
</div>

let vm = new Vue({
      el: '.box', //控制的html代码块
      data: {
          meg: '我的VUE学习',
          p_iner: '内容指令1',
          p_iner2: '<p>新建的p标签</p>',
      }
})

补充：v-text会让整个标签的内容全部变化。

4.3、属性指令

• v-bind

  动态绑定属性名/属性值

• v-bind:html属性="数据" 可简写为 :html属性="数据"

  属性值动态绑定

• v-bind:[属性名]="数据"

  属性名动态绑定

<input v-bind:type="ssp" class="ipt" v-bind:[ssp2]="sp2_v">

//属性指令
let vm3 = new Vue({
    el: '.ipt',
    data: {
        ssp: 'text',//添加属性值
        ssp2: 'id',//添加属性没=名为id
        sp2_v: 'pass',//添加id名
    }
})

当属性值是 null、undefined 或 false，则该属性属性不会出现在在渲染出的标签里。

4.4、条件渲染(指令)

• v-if

  控制元素显示与隐藏

• v-show

  控制元素显示与隐藏

<!--true为显示,  false为隐藏-->
<div v-if="false">box2</div>
<div v-show="true">box1</div>

两者区别：
v-if通过添加和删除dom元素来实现隐藏显示效果，
而v-show通过操作css的display属性显示隐藏。

---

v-if指令还可以结合v-else-if ， v-else一起使用。

<p v-if="a<100"> 小</p>
<p v-else-if="a<180">较小</p>
<p v-else>大</p>

4.5、列表渲染(循环指令)

• v-for

把数据循环显示在html里

<li v-for="值 in 数据">{{值}}</li>  
<li v-for="值 of 数据">{{值}}</li>

<ol class="oll">
    <li v-for="item in arr">{{item}}</li>
</ol>

//列表渲染
let vm6 = new Vue({
     el: '.oll',
     data: {
         arr: [12, 23, 24, 53]
     }
})

注意：

空数组，null，undefined不循环
v-for和v-if使用在同一个标签里时，v-for 的优先级比 v-if 更高，即：v-for套着v-if，先循环再判断