interpolación
- interpolación de texto
- El enlace de datos es la forma más común de uso
{{...}}（双大括号）de la interpolación de texto
Siguiendo en el cuerpo de la etiqueta
//vue引用
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
//Html
<div id="hv">
<h1>{{title}}</h1>
<h3>{{message}}</h3>
<h5>{{way()}}</h5>
</div>
<script type="text/javascript">
//1.创建vue对象
var helloVue=new Vue({
el:'#hv',//首先获取标签
data:{//填写数据
title:'跟着网站学vue',
message:'内容都从网上搜集来的'
},
methods:{
way:function()
{
return 'Hi!Bro.'+"welcome to the title "+this.title;
}
}
});
document.write(helloVue.$data.message);
</script>
Vue proporciona algunos ejemplos de métodos útiles y atributos de instancia. Tienen un prefijo $ para distinguir la zona del atributo definido por el usuario.
Resultados La Figura operativos:
- v-html
usando las instrucciones V-html para dar salida al código html
Código muestra:
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="hv" v-html="htmlcode">
</div>
<script type="text/javascript">
//1.创建vue对象
var helloVue=new Vue({
el:'#hv',//首先获取标签
data:{//填写数据
htmlcode: '<h1>I am Jafe!</h1>'
}});
</script>
representaciones:
- v-bind (atributo)
- valor del atributo HTML será comando v-bind .
Código muestra:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.class1{
background-color: aqua;
}
</style>
</head>
<body>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<label>颜色修改</label><input type="checkbox" v-model="mess"/>
<div id="" v-bind:class="{'class1':mess}">
这是演示框
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
mess:false
}
});
</script>
</div>
</body>
</html>
Figura efecto:
en el que v-bind:class="{'class1':mess}se puede abreviar como: :class="{'class1':mess}
4. Expresión
escribir el cuerpo de la etiqueta
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
{{3+7+8}}<br>
{{mess?'ok':'no'}}<br>
{{info.split('').reverse().join('')}}
<span v-bind:id="'list-'+id">
</span>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
mess:false,
info:'Jafe',
id:1
}
});
</script>
- Instrucción
de comandos es una propiedad especial con el prefijo V-. Cuando una instrucción para cambiar el valor de la expresión, cierto comportamiento se aplica a la DOM.
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test" >
<span v-if="saw">现在你能看到我</span>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
saw:true
}
});
</script>
</div>
Vista puede modificar vio el valor de cambio.
- parámetros
- Parámetros especificados en las instrucciones para el colon
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test" >
<a v-bind:href="url">欢迎进入我的博客</a>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
url:'https://blog.csdn.net/qq_38605145'
}
});
</script>
Haga clic en el texto saltará a mi blog (ji, ji, ji ~ ~ ~)
aquí es el parámetro href, v-bind comando para informar el valor de la unión de las expresiones atributo href URL elemento.
- modificadores
- Los modificadores son períodos a
.sufijo especial especifica, se utiliza para indicar una instrucción debe estar vinculado de una manera especial.
Por ejemplo, modificador .prevent dice en V en la instrucción de llamadas activado por eventos event.preventDefault ():
<form v-on:submit.prevent="onSubmit"></form>
v-on:clickSe puede abreviar como sigue:@click
Suplemento - ciclismo
- v-para la instrucción se puede unir a una matriz de datos para hacer una lista de elementos
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
<div id="test">
<ul>
<li v-for="todo in todos">
{{todo.text}}
</li>
</ul>
</div>
<script type="text/javascript">
var v = new Vue({
el:'#test',
data:{
todos:[{text:'Jafe'},
{text:'Charlotte'},
{text:'哈哈哈'}]
}
});
</script>
representaciones:
