vuejs笔记之new Vue({})中的el/data/v-html/v-once介绍

责编:menVScode 2017-09-19 2:23 阅读(855)

        尝试 Vue.js 最简单的方法是创建一个 .html 文件,然后通过如下方式引入 Vue:

<script src="https://unpkg.com/vue"></script>

        Vue本质是构造函数,那么就需要new命令来使用:new Vue({})。

html代码

<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Vue</title>
	<script src="https://unpkg.com/vue"></script>
</head>
<body>
	<div id="app"></div>
</body>
</html>

js代码

var obj = {
	name:'menvscode.com'
}
let app = new Vue({
	el:'#app',//绑定要操控的元素,等价于document.getElementById('app')
	//data:{ name:'menvscode.com' }
	data:obj
})
console.log(app)
console.log(app.name);//menvscode.com
console.log(document.getElementById('app')===app.$el);//true

        通过new Vue()创建其实例对象app,打印app实例对象如下图:

QQ截图20170918235027

        el:'#app'绑定要操控的元素,等价于document.getElementById('app'),并且 document.getElementById('app')===app.$el 比较后的结果为 true。

        data:{ }:json对象

    

        app.$watch( ),监听数据的变化,可以传入两个参数:所要监听的值;回调函数,其内部也有2个参数,分别变化后与变化前的值。当修改所监听的值时,就会自动调用app.$watch()方法。

var app = new Vue({
	el:'#app',
	data:{
		name:'menvscode'
	}
})
//监听数据的变化,参数1:监听的值;参数2:回调函数(变化之后的值,变化之前的值)
app.$watch('name',function(newVal,oldVal){
	console.log(oldVal,newVal);
}); 
//当修改name值的时候,自动会调用$watch(),并输出 menvscode MVC 
app.name = 'MVC';//app.$data.name='MVC'


        v-once:只绑定一次,最初绑定是什么就是什么。上方的代码在没有加v-once的时候,当name值发生改变的时候,页面上绑定的值也会随之改边。当加了v-once的时候,页面上绑定的值就是最初赋予的值,不会改变。

//html

<div id="app" v-once >{{name}}</div>

//js var
app = new Vue({ el:'#app', data:{ name:'menvscode' } }) app.name = 'MVC';


        v-html:会将html进行编译,在显示出现。比如在前台显示文章内容的时候。

//html
<div id="app" v-html='' >{{name}}</div>
//渲染结果是:<b style="font-size:16px;">menvscode</b>

//js
var app = new Vue({
	el:'#app',
	data:{
		name:'<b style="font-size:16px;">menvscode</b>'
	}
})


	
<div id="app" v-html='name' ></div>

var app = new Vue({
	el:'#app',
	data:{
		name:'<b style="font-size:16px;">menvscode</b>'
	}
})


标签: vue v-once v-html
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码