Vue实例的属性及模板渲染
Posted 橘猫吃不胖～
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue实例的属性及模板渲染相关的知识，希望对你有一定的参考价值。
Vue实例的属性
1 概述
Vue.js是通过**new Vue(…)**来声明一个实例的，在这个实例中包含了当前页面的html结构、数据和事件。Vue实例是MVVM模式中的ViewModel，实现了数据和视图的双向绑定。在实例化时可以传入一个选项对象，它包含数据、模板、挂载元素、方法、生命周期钩子函数等选项。
2 el：与DOM元素绑定
el是element的简写，用来和DOM元素进行绑定，对应的是DOM元素的id属性值（类似id选择器）。
3 data：定义双向绑定的数据
在Vue实例中初始化的data中的所有数据会自动进行监听绑定，可以使用两个大括号（ ）来绑定data中的数据。
示例代码：
<div id="app">
<h2>message</h2>
<input type="text" v-model="message">
</div>
<script>
var vm = new Vue(
el: "#app",
data:
message: "橘猫吃不胖"
)
</script>
如果在输入框中输入其他内容，h2标签也会显示该内容，vue与h2标签的绑定是单向的，与input标签的绑定是双向的。
注：data中的数据都是浅拷贝。这意味着，如果修改原来的对象也会改变data，从而触发更新事件。
4 computed：对数据进行处理
computed是计算属性，是data属性的补充。在进行数据绑定的时候，对数据要进行一定的处理才能展示到HTML页面上。虽然Vue提供了非常好的表达式绑定方法，但是只能应对低强度的需求。使用方法可以跟data中的属性一样使用，注意用的时候不要加“()”。
例如，把一个日期按照规定格式进行输出，可能就需要对日期对象做一些格式化。Vue提供的计算属性（computed）允许开发者编写一些方法，协助进行绑定数据的操作。
示例代码：
<div id="app">
<table>
<tr>
<td>姓名：</td>
<td>name</td>
</tr>
<tr>
<td>生日：</td>
<td>getBirthday</td>
</tr>
</table>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
name: "橘猫吃不胖",
birthday: 1014228510514 // 穿了一个毫秒数
,
computed: // 计算属性，对data中的数据进行处理
getBirthday: function () // getBirthday就是表格中的getBirthday，其本质是一个属性
let date = new Date(this.birthday);
return date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + "日";
)
</script>
每一个计算属性都包含一个getter 和一个setter ，上面的示例是计算属性的默认用法， 只是利用了getter 来读取。在需要时，也可以提供一个setter 函数， 当手动修改计算属性的值就像修改一个普通数据那样时，就会触发setter 函数，执行一些自定义的操作。
【计算属性缓存】计算属性是基于它们的依赖进行缓存的，计算属性只有在它的相关依赖发生改变时才会重新求值。
【计算属性缓存的特点】是属性变化才执行getter函数，否则执行缓存默认的true指令打开缓存。
【计算属性缓存的作用】如果频繁使用计算属性，而计算属性方法中有大量的耗时操作(例如在getter中循环一个大的数组)，会带来一些性能问题。计算属性可以用来解决该问题。
<div id="app">
<p>水果</p>
<span> pear </span>
<span> apple </span>
<span> banana </span>
<span> number </span>
<p style="padding:12px 0;">它们是： result </p>
<button @click="btn">输出答案</button>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
pear: '梨子',
apple: '苹果',
banana: '香蕉',
number: '水果'
,
computed:
result:
cache: true, //打开缓存
get: function()
return "abcdefg"+this.pear+this.apple+this.banana+this.number
,
set: function(newVal)
this.pear = newVal.substr(0,2);
this.apple = newVal.substr(2,2);
this.banana = newVal.substr(4);
this.number = newVal.substr(4);
,
methods:
btn()
this.result = "123456"
)
</script>
点击按钮后：
5 methods：定义Vue实例的方法
methods：通过methods对象定义方法，并使用v-on指令来监听DOM事件。
示例代码：
<div id="app">
<p>原始字符串：" message "</p>
<p>反向字符串：" reversedMessage()"</p>
</div>
<script>
var vm = new Vue(
el: '#app',
data:
message: '橘猫吃不胖'
,
methods:
reversedMessage: function ()
return this.message.split('').reverse().join('')
)
</script>
6 Vue中的三种模板
6.1 html模板
html模板：基于DOM的模板，模板都是可解析的有效的HTML插值
文本：使用 语法，作用：替换实例上的属性值，当值改变时，插值内容处会自动更新
原生的html：双大括号输出的是文本，不会解析html（想要解析html，可以使用指令v-html）
属性：使用v-bind进行绑定，可以响应变化
<div id="wrap">
<p>你的名字是list.name</p>
</div>
<script>
var list =
name: "donna",
age: 20
var vm = new Vue(
el: "#wrap",
data: list
);
</script>
6.2 字符串模板
先定义字符串模板，然后在vue 的选项对象里面利用template绑定。字符串模板的优先级会比html模板高，如果html和字符串模板中都有内容，会用字符串模板里的内容替换html模板。需要注意的是定义的字符串模板中根节点只能有一个。还有字符串用 ` 引起来是可以换行的。
示例代码：
<div id="app"></div>
<script>
let obj =
content: "橘猫吃不胖"
let str = `<div>Hello content</div>`;
new Vue(
el: "#app",
data: obj,
template: str
)
</script>
除了用变量定义模板字符串，还可以用script标签，给script 标签定义id，根节点只能有一个，将html结构写在一对script标签中，设置type=“x-template”，模板将会替换挂载的元素。挂载元素的内容都将被忽略。Vue实例的template属性设置为给定的script标签
示例代码：
<div id="app"></div>
<script type="x-template" id="test">
<div>
<p>姓名：obj.name</p>
</div>
</script>
<script>
let obj =
name: "张三"
new Vue(
el: "#app",
data: obj ,
template: "#test"
)
</script>
6.3 render函数模板
render(createElement)
createElement(标签名,[数据对象],子元素)//子元素为数组或对象
数据对象的属性：
class: , //绑定class
style: , //绑定样式，
attrs: , //添加行间属性
domProps: , //DOM元素属性
on: , //绑定事件
示例代码：
<div id="app"></div>
<style>
.bg
background-color: pink;
</style>
<script>
new Vue(
el: "#app",
render(createElement)
return createElement(
"ul",
class: bg: true ,
style: listStyle: "none" ,
attrs:
name: "tt"
,
[
createElement("li", "苹果"),
createElement("li", "香蕉"),
createElement("li", "橘子")
]
)
)
</script>
7 watch属性
watch属性用来观察和响应Vue实例上的数据变动，watch属性是一个对象，它有两个属性：一个是键，一个是值。键时需要观察的表达式，值是对应的回调函数，回调函数得到的参数为新值和旧值。值也可以是方法名，或者包含选项的对象。Vue实例将会在实例化时调用$watch()，遍历watch对象的每一个属性。
示例代码：
<div id="app">
<button @click="a--">减1</button>
<br>
<p>message</p>
</div>
<script>
new Vue(
el: "#app",
data:
a: 2,
message: " ",
,
watch:
a: function (val, oldVal)
this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
)
</script>
除了使用数据选项中watch以外，还可以使用实例对象的$watch()方法，该方法的返回值是一个取消观察函数，用来停止触发回调
<div id="app">
<button @click="a--">减1</button>
<br>
<p>message</p>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
a: 5,
message: " ",
)
let unwatch = vm.$watch("a", function (val, oldVal)
if (val === 1)
unwatch(); // 当新的值为1时，停止监听
this.message = "a的原值是：" + oldVal + "，a的新值是：" + val;
)
</script>
当新值为1时，点击按钮，下面的字符串不会在发生变化。
8 模板渲染
8.1 条件渲染
条件渲染分为两种方式，一种是v-if，另一种是v-show。v-if又分为单路分支、双路分支和多路分支。只有if后面的值为true时才会有DOM元素，为false时不会有DOM元素
1、v-if方式渲染：在<template>中配合v-if渲染，在使用v-if控制元素的时候，需要将它添加到这个元素上。然而，如果需要切换很多元素时，一个一个添加比较麻烦。这时，可以使用<template></template>将一组元素进行包裹
<div id="app">
<template v-if="yes">
<h2>vue</h2>
</template>
</div>
<script>
var vm = new Vue(
el: "#app",
data:
yes: true
)
</script>
2、v-show方式渲染：用法与v-if大致相同
8.2 列表渲染
列表渲染用v-for指令根据一组数据的选项列表进行渲染。v-for指令需要采用item in items 形式的特殊语法，其中items是源数据
<div class="app">
<ul>
<li v-for="item in items">item.text</li>
</ul>
</div>
<script>
new Vue(
el: '.app',
data:
items: [
text: 'Name',
text: 'Age',
text: 'Like'
]
)
</script>
可以使用v-for迭代对象的属性
<div class="app">
<ul>
<li v-for="item in obj">item</li>
</ul>
</div>
<script>
new Vue(
el: '.app',
data:
obj:
firstname: '欧阳',
lastname: '静静',
age:18
)
</script>
以上是关于Vue实例的属性及模板渲染的主要内容，如果未能解决你的问题，请参考以下文章