Vue.js入门（一）插值操作&&绑定属性

Vue.js（一）

准备知识

什么是vue？

​ | vue.js是前段主流框架之一（还有Angular.js React.js）

​ |一套构造用户界面的框架，只关注视图层，主要和界面打交道，便于与第三方库或既有的项目整合（vue有配套的第三方库）

框架和库的区别

​ | 框架：完整的解决方案， 只需要使用框架提供的类或函数，即可实现全部功能 ，对项目的入侵性很大，中途不能轻易更换框架否则需要重新架构整个项目

​ | 库：提供某一个小功能， 库为我们提供了很多封装好的函数，我们就取所需的某部分，其他没有用上的我们自己来实现 ，对项目的入侵性小，如果某个库无法完成某些需求，可以切换到其他库

MVVM

​ | MVVM前端的分层开发思想，把每个页面分成了M,V,VM；VM是MVVM核心（VM是M和V之间的调度者）

​ |M： 数据模型 。保存每个页面单独的数据

​ |VM： 修改数据 & 自动渲染 。对从后端获取的 Model 数据进行转换处理，做二次封装，以生成符合 View 层使用预期的视图数据模型 （ 包括视图的状态和行为），而 Model 层的数据模型是只包含状态的。比如页面的这一块展示什么，那一块展示什么 => 视图状态(展示)，而页面加载进来时发生什么，点击这一块发生什么 =>视图行为（交互）。

​ |V： 带特殊属性的 html 模板 ，里面可以嵌入一些js模板的代码，比如Mustache

vue和MVVM的例子

<!--Vue 的 View 模板-->
<div id="app">
    <p>{{message}}</p>
    <button v-on:click="showMessage()">Click me</button>
</div>

//Vue 的 ViewModel 层（伪代码）
var app = new Vue({
    el: '#app',
    data: {     // 用于描述视图状态（有基于 Model 层数据定义的，也有纯前端定义）
        message: 'Hello Vue!',  // 纯前端定义
        server: {}, // 存放基于 Model 层数据的二次封装数据
    },
    methods: {  // 用于描述视图行为（完全前端定义）
        showMessage(){
            let vm = this;
            alert(vm.message);
        }
    },
    created(){
        let vm = this;
        // Ajax 获取 Model 层的数据
        ajax({
            url: '/your/server/data/api',
            success(res){
                // TODO 对获取到的 Model 数据进行转换处理，做二次封装
                vm.server = res;
            }
        });
    }
})

//服务端的Model层
{
    "url": "/your/server/data/api",
    "res": {
        "success": true,
        "name": "IoveC",
        "domain": "www.cnblogs.com"
    }
}

插值操作

Mustache

​ 将data中的数据插入到html中 {{ }}语法

v-cloak

​ v-cloak 指令设置样式，会在 Vue 实例编译结束时，从绑定的 HTML 元素上被移除。如果当网络较慢，网页还在加载 Vue.js ，而导致 Vue 来不及渲染，这时页面就会显示出 Vue 源代码 => 使用 v-cloak 来解决这一问题

<div id="app">
  <h2 v-cloak>{{message}}</h2>
</div>
<style>
    [v-cloak]{
        display:none
    }
</style>

<script src="../js/vue.js"></script>
<script>
  // 在vue解析之前, h2中有一个属性v-cloak
  // 在vue解析之后, h2中没有一个属性v-cloak
  var app = new Vue({
     el: '#app',
     data: {
        message: '你好啊'
     }
   })
</script>

v-test

​ |通常情况下，v-test接收一个string类型

​ |不会因网速问题显示插值表达式（vue的源代码）

​ |会覆盖元素中原本的内容

<h2 v-test = "message"></h2>
<h2 v-test = "message">==123</h2>

<!-- v-test只会显示massage的内容，不会显示"==123" ；而<h2 v-cloak>+++{{message}}+++</h2>会显示message两边的+号
-->

v-html

​ |可以解析html标签并且进行渲染

<div v-html="message"></div>

<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
     data: {
        message: '<h1>我是一个h1标签</h1>'
     }
   })
</script>

v-once

​ |该指令后面不需要跟任何的表达式

​ |限制元素和组件只会渲染一次，不会随着数据的改变而改变

<div id="app">
  <p v-once>{{msg}}</p>  
  <!-- //msg不会改变 -->
  <p>{{msg}}</p>
  <p>
    <input type="text" v-model = "msg">
  </p>
</div>

<!--当修改input框的值时，使用了v-once指令的p元素不会随之改变，而第二个p元素时可以随之改变的-->

v-pre

​ |跳过这个元素和他子元素的编译过程，显示原本的Mustache语法

<div id = "app">
    <p>{{message}}</p>
    <p v-pre>{{message}}</p>
</div>

<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
     el:'#app'
     data: {
        message: '<h1>我是一个h1标签</h1>'
     }
   })
</script>

绑定属性v-bind

​ |上面的指令主要用于动态插入内容，有时候我们也需要动态绑定a标签的href img标签的scr => v-bind

<div id = "app">
    <a v-bind:href = "link">百度一下你就知道</a>
    <!--语法糖(简写)：<img :scr = "logoUrl" alt = ""> 省略v-bind只留下冒号-->
    <img v-bind:scr = "logoUrl" alt = "">
</div>
<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
     el:'#app'
     data: {
        logoUrl: 
      	link:"https://www.baidu.com/"
     }
   })
</script>

绑定class

对象语法

<ul class="box" :class="{‘textColor‘:isColor, ‘textSize‘:isSize}">
    <li>学习Vue</li>
</ul>
<style>
    .box{
    	border:1px dashed #f0f;
	}
	.textColor{
    	color:#f00;
    	background-color:#eef;
	}
	.textSize{
    	font-size:30px;
    	font-weight:bold;
	}
</style>
<script>
    var vm= new Vue({
    	el:'.box',
    	data:{
        	isColor:true,
        	isSize:true
    	}
	})
</script>

数组语法

语法基本同对象语法，只不过class之后跟的是一个数组

<div id="app">
  <h2 class="title" :class="[active, line]">{{message}}</h2>
</div>

<script src="../js/vue.js"></script>
<script>
  const app = new Vue({
    el: '#app',
    data: {
      message: 'hello！',
      active: 'classA',
      line: 'classB'
    }
  })
</script>

绑定style

绑定css内联样式（驼峰式命名）

对象语法

​ | value可以是一个变量，来自data的属性

<!--<h2 :style="{key(属性名): value(属性值)}">{{message}}</h2>  key和value都可以是一个变量-->
<h2 :style="{fontSize: '50px'}">{{message}}</h2>
<h2 :style="{fontSize: finalSize + 'px', backgroundColor: finalColor}">{{message}}</h2>

<script src="../js/vue.js"></script>
<script>
  var app = new Vue({
    data: {
      message: '你好啊',
      finalSize: 100,
      finalColor: 'red',
    }
})

数组语法

​ style后跟的是一个数组

<div id="app">
  <h2 :style="[baseStyle, baseStyle1]"></h2>
</div>

<script src="../js/vue.js"></script>
<script>
  	var app = new Vue({
    el: '#app',
    data: {
      baseStyle: {backgroundColor: 'red'},
      baseStyle1: {fontSize: '100px'},
    }
  })
</script>

来源：oschina

链接：https://my.oschina.net/u/4313107/blog/4463275