vue在html使用
1.Vue:
定义:渐进式JavaScript框架
渐进式:
定义:声明渲染 组件系统 客户端路由 集中式状态管理 项目构建
2.MVVM
| 定义 | |
|---|---|
| M | Model（服务器上的业务逻辑操作） |
| V | View（页面） |
| MV | ViewModel（Model与View之间核心枢纽，比如Vue.js） |
3.指令: 指令的本质是自定义属性
4.闪动
问题产生：出现模版语法{{msg}}
解决思路：使用v-cloak指令
解决问题原理：先隐藏，替换好值之后在显示
demo
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-cloak>
{{msg}}
</div>
</div>
<style type="text/css">
[v-cloak]{display: none;}
</style>
<script type="text/javascript" src="js/vue.js">
</script>
<script type="text/javascript">
var vu = new Vue({
el:"#app",
data:{
msg:"hello vue"
},
});
</script>
</body>
</html>
5.数据绑定指令
v-text:填纯文本,属于html片段
v-html:填写html,属于完整html
v-bind:填写属性,属于html片段
v-pre:如果原始数据,跳过编译
v-once:如果显示的信息后续不需要再修改，使用v-once，这样可以提高性能。
demo:
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div v-text="msg"></div>
<div v-html="html"></div>
<a v-bind:href="link1">这是v-bind</a>
<div v-pre>{{preInfo}}</div>
<div v-once>{{onceInfo}}</div>
</div>
</body>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript">
var vm = new Vue({
el:"#app",
data:{
link1:"https://www.cnblogs.com/MDD-Blog/",
img:"./img/logo.png",
msg:"这是v-text",
html:"<h1>这是v-html</h1>",
preInfo:"这是v-pre",
onceInfo:"这是v-once"
},
});
</script>
</html>
6.双向数据绑定
原理：v-model ----> vue ----> data
demo
code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div v-text="msg"></div>
<input type="text" v-model="msg"/>
</div>
<script type="text/javascript" src='js/vue.min.js'></script>
<script type="text/javascript">
var vm = new Vue({
el:".app",
data:{
msg : "hello world",
message: "hello vue",
},
});
</script>
</body>
</html>
7.事件绑定
v-on:事件名="方法" 事件名：点击: click 移动: mouseenter 双击: dbclick
demo1: 事件函数调用
code:事件函数调用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div> {{num}} </div>
<button v-on:click="add()">1.加一</button>
<button v-on:click="reduce">减一</button>
</div>
<script type="text/javescript" src='js/vue.min.js'>
</script>
<script type="text/javascript">
var vm = new Vue({
el:".app", /* 元素的挂载位置 */
data:{
num:15,
}, /* 模型数据(值是一个对象) */
methods:{
add:function(){
this.num++
},
reduce:function(){
this.num--
}
}
});
</script>
</body>
</html>
demo2: 事件函数传参
code:事件函数传参
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="app">
<div> {{num}} </div>
<button v-on:click="add">1.加一</button>
<button v-on:click="reduce(2, $event)">减二</button>
</div>
<script type="text/javescript" src='js/vue.min.js'>
</script>
<script type="text/javascript">
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
}
}
});
</script>
</body>
</html>
注意：
<button v-on:click="reduce(2, $event)">减二</button> // $event为事件参数必须放到末尾
v-if
<div id="app">
<div v-if="name === 'a'">
a
</div>
<div v-else-if="name === 'b'">
b
</div>
<div v-else-if="name === 'c'">
c
</div>
<div v-else>
不是a或b或c
</div>
</div>
<script>
new Vue({
el: '#app',
data: {
name: 'c'
}
})
</script>
v-show
code:
<h1 v-show="ok">Hello!</h1>
v-if和v-show的区别
v-if :每次都会重新删除或者创建元素
v-show:每次不会重新进行DOM元素的删除和创建操作，只是切换了元素的 display:none 样式
v-for
demo:
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="app">
<div >
<label>ID:
<input type="text" v-model="id" />
</label>
<label>NAME:
<input type="text" v-model="name" />
</label>
<input type="button" v-on:click="add" value="添加"/>
</div>
<p v-for="item in infos" v-bind:key="item.id">
<input type="checkbox" />
{{ item.id }}
</p>
</div>
</body>
<script type="text/javascript" src='js/vue.js'></script>
<script type="text/javascript">
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})
},
}
})
</script>
</html>
