html展示值 vue_vue在html使用

1.Vue:

定义:渐进式JavaScript框架

渐进式:

定义:声明渲染 组件系统 客户端路由 集中式状态管理 项目构建

2.MVVM

定义

M

Model(服务器上的业务逻辑操作)

V

View(页面)

MV

ViewModel(Model与View之间核心枢纽，比如Vue.js)

3.指令: 指令的本质是自定义属性

4.闪动

问题产生：出现模版语法{{msg}}

解决思路：使用v-cloak指令

解决问题原理：先隐藏，替换好值之后在显示

demo

code

{{msg}}

[v-cloak]{display: none;}

var vu = new Vue({

el:"#app",

data:{

msg:"hello vue"

},

});

5.数据绑定指令

v-text:填纯文本,属于html片段

v-html:填写html,属于完整html

v-bind:填写属性,属于html片段

v-pre:如果原始数据,跳过编译

v-once:如果显示的信息后续不需要再修改，使用v-once，这样可以提高性能。

demo:

code

这是v-bind

{{preInfo}}

{{onceInfo}}

var vm = new Vue({

el:"#app",

data:{

link1:"https://www.cnblogs.com/MDD-Blog/",

img:"./img/logo.png",

msg:"这是v-text",

html:"

这是v-html

",

preInfo:"这是v-pre",

onceInfo:"这是v-once"

},

});

6.双向数据绑定

原理：v-model ----> vue ----> data{k:v,}

demo

code

var vm = new Vue({

el:".app",

data:{

msg : "hello world",

message: "hello vue",

},

});

7.事件绑定

v-on:事件名="方法" 事件名：点击: click 移动: mouseenter 双击: dbclick

demo1: 事件函数调用

code:事件函数调用

{{num}}

1.加一

减一

var vm = new Vue({

el:".app", /* 元素的挂载位置 */

data:{

num:15,

}, /* 模型数据(值是一个对象) */

methods:{

add:function(){

this.num++

},

reduce:function(){

this.num--

}

}

});

demo2: 事件函数传参

code:事件函数传参

{{num}}

1.加一

减二

var vm = new Vue({

el:".app", /* 元素的挂载位置 */

data:{

num:15,

}, /* 模型数据(值是一个对象) */

methods:{

add:function(event){

// 这里 this 是 vue 的实例对象

console.log(event.target.innerHTML)

this.num++

},

reduce:function(num2, e){

this.num-=num2

}

}

});

注意：

减二 // $event为事件参数必须放到末尾

v-if

a

b

c

不是a或b或c

new Vue({

el: '#app',

data: {

name: 'c'

}

})

v-show

code:

Hello!

v-if和v-show的区别

v-if :每次都会重新删除或者创建元素

v-show:每次不会重新进行DOM元素的删除和创建操作，只是切换了元素的 display:none 样式

v-for

demo:

code:

ID:

NAME:

{{ item.id }}

var vm = new Vue({

el:"#app",

data:{

id:"",

name:"",

infos:[

{id:1,name:"11"},

{id:2,name:"22"},

{id:3,name:"33"},

{id:4,name:"44"},

],

},

methods:{

add:function(){

// 列表尾部添加

// this.infos.push({id:this.id, name:this.name})

// 列表头部添加

this.infos.unshift({id:this.id, name:this.name})

},

}

})