categories:
- vue基础
tags: - vue总结
目录
vue总结
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vue基础总结</title>
<style>
.active{
50px;
height: 50px;
background: #0cf;
}
.toogle{
50px;
height: 50px;
background: #fc0;
}
</style>
</head>
<body>
<div id="app"></div>
<!-- 1. 引包-->
<script src="./vue.js"></script>
<script>
// 2.初始化
const vm = new Vue({
el: '#app',
// 数据属性
data: function (){
return {
msg: '<pre>信息系统</pre>',
show:true,
c_toogle:true,
lists:[
{id:1,name:'萝卜',price:15},
{id:2,name:'黄瓜',price:25},
{id:3,name:'白菜',price:22},
],
Obj:{
title:'标题',
author:'作者',
price:70
},
model: 'model',
model2: 'model2',
}
},
// template 优先于 el
// v-text 对应innerText
// v-html 对应innerHTML
// v-if 对应appendChild(),removeChild()
// v-show 对应css的display:block,none
// v-bind 绑定属性(内置属性和自定义属性),简写:class
// v-on:原生事件名 = '函数名',简写:@click
// v-for 列表渲染,遍历数组，对象
// v-model 双向数据绑定,只会体现在UI控件中，只能应用在有value属性的元素中
// 语法糖：是v-bind:value和v-bind:input的体现
template:`
<div>
<h2>{{msg}}</h2>
<p v-text="msg"></p>
<p v-html="msg"></p>
<p v-if="!show">隐藏</p>
<p v-if="show">显示</p>
<p v-show="!show">display</p>
<p v-show="show">display</p>
<p v-bind:class="{active:show}">显示</p>
<p @click="toogle" :class="{toogle:c_toogle}">点击换色</p>
<ul>
<li v-for="(item,index) in lists" v-bind:index="index">
{{ item.id }} {{ item.name }} {{ item.price }} {{ index }}
</li>
</ul>
<div v-for="item in Obj">{{item}}</div>
<input type="text" v-model="model" />
<p>{{ model }}</p>
<hr />
实现v-model
<input type="text" :value="model2" @input="handlerChange" />
<p>{{ model2 }}</p>
</div>`,
methods:{
toogle(){
this.c_toogle = !this.c_toogle;
},
handlerChange(e){
console.log(e.target.value)
this.model2 = e.target.value;
}
}
})
</script>
</body>
</html>