Vue (marco js de front-end progresivo), adecuado para proyectos que separan el front-end y el back-end.
Características: Fácil de comenzar, documentación china completa, ecología desarrollada (muchos complementos)
El primer paso para escribir una instancia de vue es introducir vue.js
<script src="js/vue.js"></script>
1. Representación declarativa
Renderizar datos a la estructura dom a través de { {}}
<div id="app">
<h1>Vue 开始</h1>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
</div>
<script>
new Vue({
el:"#app",
data:{
"msg":"你好世界，你好vue！"}
})
</script>
resultado
2. Instrucciones
Qué es una instrucción: una instrucción es un atributo especial que conecta una instancia de objeto Vue a una plantilla (conecta vue y html)
<div id="app">
<h1>Vue的指令</h1>
<h3>文本渲染指令 v-text</h3>
<p v-text="msg"></p>
<p v-text="8+5"></p>
<p v-text="msg+'不能！'"></p>
<p v-text="tip"></p>
<h3>文本渲染指令 v-html<br/>（可以解析html标签）</h3>
<p v-html="tip"></p>
<h3>文本渲染指令 {
{
} }</h3>
<p>{
{
msg}}</p>
<p>可以编写简单的javascript： {
{
2+3}}</p>
<p>msg的长度 {
{
msg.length}}</p>
<p>{
{
msg.split('').reverse().join('')}}</p>
<p>{
{
5>3?'大于':'小于'}}</p>
</div>
<script>
// 什么是指令：指令是连接Vue对象实例与模板的特殊属性（把vue和html连接在一起）
// 什么是vue实例 ：vm就是Vue的实例
// 什么是模板：#app
var vm = new Vue({
el:"#app",//vue指令在#app这个节点启用
data:{
msg:"你好我能做你的朋友吗？",
tip:"<strong>河南</strong>是一个好地方",
}
})
</script>
resultado
3. Instrucciones condicionales
La diferencia entre v-if y v-show:
al ocultar un nodo,
v-show oculta v-if a través de css
y elimina dom para lograr
v-show es adecuado para cambiar frecuentemente entre mostrar y ocultar
v-if es adecuado para un pequeño cantidad de cambio mostrar y ocultar
<div id="app">
<h1>vue条件渲染指令</h1>
<h3>v-if指令</h3>
<p v-if="isLog">欢迎回来，我的主人！</p>
<p v-else>登录，注册</p>
<h3>v-else-if</h3>
<p v-if="score>=90">优秀</p>
<p v-else-if="score>=80">良好</p>
<p v-else-if="score>=70">中等</p>
<p v-else-if="score>=60">及格</p>
<p v-else>不及格</p>
<h3>v-show</h3>
<p v-show="isLog">欢迎回来，我的主人！</p>
<!-- <p>v-if与v-show的区别：<br>
当去隐藏一个节点的时候，<br>
v-show通过css方式隐藏<br>
v-if是通过移除dom来实现</p>
<p>v-show适合频繁切换显示与隐藏 <br>
v-if 适合少量切换显示与隐藏
</p> -->
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
isLog:ture,
score:82
}
}
})
</script>
El resultado (si cambia isLog:true a false
¡Bienvenido de nuevo, mi maestro!
no mostrar, mostrarIniciar sesión Registrarse
）
4. Lista de instrucciones de renderizado
<div id="app">
<h3>复杂列表对象</h3>
<p v-for="(item,index) in ls" :key="item.name">
{
{
index+1}}-{
{
item.name}}-{
{
item.age}}
</p>
<h3>对象</h3>
<p v-for="(value,k) in yang" :key="k">{
{
k}}-{
{
value}}</p>
<h3>渲染数字</h3>
<h3>列表渲染指令</h3>
<p v-for="item in list" :key="item+'a'">{
{
item}}</p>
<h3>列表渲染指令带索引</h3>
<p v-for="(item,index) in list" :key="item">{
{
index+1}}-{
{
item}}</p>
<h3>优化列表渲染</h3>
<p v-for="(item,index) in list" v-bind:key="index">{
{
index+1}}-{
{
item}}</p>
<p>key 帮助优化vue内部渲染，key值要求是唯一，还不建议用index，会取数据的id</p>
</div>
<script>
var vm=new Vue({
el:"#app",
data(){
return{
ls:[
{
name:"cxx",age:22},
{
name:"wsj",age:18},
{
name:"小王",age:17},
],
list:['Vue','react','angular','jQuery'],
yang:{
"name":"阳阳",age:16,sex:"男"}
}
}
})
</script>
resultado
5. Manejo de eventos
v-on: nombre del evento = "controlador de eventos"
como
v-on:click="showMsg"
v-on:click="showMsg()"
controlador de eventos
methods:{
showMsg();
}
Si la función de respuesta tiene paréntesis, no tendrá parámetros de eventos por defecto. Si la función de respuesta no tiene paréntesis, tendrá parámetros de eventos por defecto. Si la función de respuesta no tiene paréntesis, tendrá todos los parámetros de eventos por defecto.e v e n t Parámetros de eventos Si la función de respuesta no tiene paréntesis , se predetermina a todos los parámetros de tiempo de eventos
Si tiene paréntesis ($ evento), especifique manualmente los parámetros de eventos Atajo para
enlace de eventos @click="showMsg"
<div id="app">
<h3>事件响应函数</h3>
<button @click="calc(-1)" :disabled="num<=1">-</button>
<!-- v-model.number 限定为数字 -->
<input type="text" v-model.number="num">
<button @click="calc(1)" :disabled="num>=999">+</button>
<h3>事件处理</h3>
<button v-on:click="num++">{
{
num}}</button>
<h3>事件处理简写</h3>
<button @click="num--">{
{
num}}</button>
</div>
<script>
var vm = new Vue({
el: "#app",
methods: {
calc(step) {
// 在js中访问data中num值需要加this
this.num += step;
// 对num进行限定
if (this.num < 1) {
this.num = 1 }
if (this.num > 999) {
this.num = 999 }
}
},
data() {
return {
num: 1
}
}
})
</script>
Resultados (haga clic en "+", "-" todos los números cambiarán en consecuencia)
6. Representación de atributos
v-bind: nombre del atributo="valor del atributo"
v-bind:título="mensaje"
v-modelo formulario atributo
: título="mensaje" //abreviatura
<div id="app">
<h3>属性渲染指令</h3>
<p>{
{
msg}}</p>
<input type="text" v-model="msg">
<p v-bind:title="msg">我是一行可爱的文字</p>
<h3>属性绑定简写</h3>
<p :title="msg">我是一行可爱的文字</p>
<h3>表单属性绑定</h3>
<p>
<!-- checkbox 选中的true，不选中是false -->
隐私条款 <input type="checkbox" v-model="flag" />
</p>
<!-- disabled 取值为true时候，表单不可以用 -->
<button :disabled="!flag">注册</button>
</div>
<script>
var vm = new Vue({
el:"#app",
data (){
return {
msg:"中国伟大的祖国",
flag:false,
}
},
})
</script>
Resultados (mouse en "
Soy una hermosa línea de texto.
"Habrá un aviso de título en el resultado de la ejecución)
7. caja de pestañas
<div id="app">
<button @click="num=1" :class="num==1?'active':''">html</button>
<button @click="num=2" :class="num==2?'active':''">css</button>
<button @click="num=3" :class="num==3?'active':''">vue</button>
<div v-if="num==1">html内容</div>
<div v-if="num==2">css内容</div>
<div v-if="num==3">vue内容</div>
</div>
<script>
var vm = new Vue({
el:"#app",
data(){
return {
num:1
}
}
})
</script>
Resultados (haga clic en el botón para alternar el contenido)
8. Modificadores de eventos
<div id="app">
<h3>事件修饰符</h3>
<button @click.once="say()">按钮</button>
</div>
<script>
var vm=new Vue({
el:"#app",
methods:{
say(){
alert("大声说出来")
}
},
data(){
return{
num:1
}
}
})
</script>
resultado
