8.12
vue.common.js 使Vue支持common
vue.esm.browser.js 使Vue支持ES6
runtime 运行时文件
插值表达式{{}}
指令系统v-xxx
v-if有更高的切换开销,v-show有更高的初试渲染开销
当DOM节点的属性发生改变时,会对template中的DOM都重新渲染
sublime新建HTML 文件名保存为英文名.html,然后英文输入法输入!,再按tab键
Q1:为啥我template引号里面换行了会报错?但是看视频课里老师换行是OK的
https://blog.csdn.net/qq_43513170/article/details/87872195
A1:人家用的不是单引号',而是1前面那个符号`。好像是template的语法,后面跟字符串,然后根据ES6的语法,``里面换行了也算字符串。
Q2.index是什么?(v-for)
A2:规定第一个参数为属性,第二个参数为键名,第三个参数为索引(跟参数叫什么变量没关系)
8.15
//基础
//01-VueBasicUse.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app">
<h2>{{msg}}</h2>
<h3>{{1+1}}</h3>
<h4>{{isTrue}}</h4>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:'#app',
data:{
//可以是对象,可以是函数
msg:'黄瓜',
isTrue:1 == 1,
},
//template:'<div>{{msg}}<div>' //优先加载
});
</script>
</body>
</html>
//指令系统
//02-VueInstruction.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type = "text/css">
.box{
width: 300px;
height: 300px;
background-color: red
}
.active{
background-color: green
}
</style>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
//v-text innerText
//v-html innerHTML
//v-if有更高的切换开销,v-show有更高的初试渲染开销
//v-bind 绑定标签属性(内置或者自定义的都可)
//v-on:原生事件名 = 函数名 绑定点击事件
var vm = new Vue({
el:'#app',
data:function(){
return{
msg:'指令系统',
msg2:'<h2>指令系统</h2>',
isShow:true,
isGreen:true,
text:'哈哈哈',
menuLists:[
{id:1,name:'番茄炒蛋',price:30},
{id:2,name:'一桶豆腐',price:50},
{id:3,name:'茶香鸡',price:70},
],
person:{
name:'Elle',
age:20,
}
}
},
template:`
<div class = 'app'>
<h2>{{msg}}</h2>
<p v-text = "'msg'"></p>
<p v-text = "msg"></p>
<div v-html = "msg2"></div>
<div v-if = 'isShow'>开</div>
<div v-if = "!isShow">关</div>
<div v-if = "Math.random() > 0.5">
显示
</div>
<div v-else>
隐藏
</div>
<div class = 'box' v-on:click = 'clickHandler' v-bind:class = "{active:!isGreen}" :aaa='text'></div>
<ul>
<li v-for = '(item,index) in menuLists'>
<h5 v-text = 'item.id'></h5>
<h3>{{item.name}}</h3>
<em>{{item.price}}</em>
<em>{{index}}</em>
</li>
</ul>
<ul>
<li v-for = '(value,key) in person'>
{{key}}:{{value}}
</li>
</ul>
</div>
`,
methods:{
clickHandler(e){
console.log(this);
this.isGreen = !this.isGreen;
}
}
});
</script>
</body>
</html>
//双向数据绑定
//03-VueDataBinding.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- v-model 双向数据绑定,只体现在UI控件中,只能应用在有value属性的;结合了v-bind,v-on -->
<div id = "app">
<!-- <input type="text" v-model = 'msg'> -->
<input type="text" v-bind:value = 'msg' v-on:input = 'valueChange'>
<h3>{{msg}}</h3>
</div>
<script type="text/javascript" src="./node_modules/vue/dist/vue.min.js"></script>
<script type="text/javascript">
new Vue({
el:"#app",
data(){
return{
msg:'hhh'
}
},
methods:{
valueChange(e){
console.log(e.target.value);
this.msg = e.target.value;
}
}
});
</script>
</body>
</html>