1. vue 的安装配置
- node.js 的安装 nodejs.cn/download/
- node的特点描述
- 它是一个Javascript运行环境
- 依赖于Chrome V8引擎进行代码解释
- 事件驱动
- 非阻塞I/O
- 轻量、可伸缩，适于实时数据交互应用
- 单进程，单线程
- 脚手架待补充
2.插值表达式
-
{{}} 双大括号插值 react {}
-
如果template中定义了内容，那么优先加载template，如果没有定义内容加载el的模板
-
console.log(vm) 除了 数据熟悉 vue实列还暴露了一些有用的实列属性和方法，他们都有前缀$
<div id="app">
<h1>{{msg}}</h1>
<h2>{{str.split('').reverse().join('')}}</h2>
</div>
<script type="text/javascript">
var vm= new Vue ({
el:'#app',
data:{
msg:'大葱',
str:'react'
},
// 写在构造器中
template:`
<div class='app'>
<h2>{{msg}} </h2>
<p v-text='msg'> </p>
</div>`
});
console.log(vm);
</script>
3.VUE 数据驱动视图
- MVC
- MVVM
4.指令系统(以 V-XXX开头)
- v-text → innerText
- v-html → innerHtml
- v-if → 数据属性对应的值 如果为假 则不在页面渲染，反之亦然
- v-show → 控制dom元素的显示隐藏 display：none/block;
- v-bind → 绑定标签上的属性（内置的属性和自定义的属性）：bind
- v-on → 原生事件名=‘函数名’ 简便写法：@
- v-for = ‘(item,index) in menuLists’
new Vue({
el:'#app',
data:function(){
return{
msg:'指令系统',
msg2:'<h2>指令系统</h2>',
isShow:false,
isGreen:false,
text:'哈哈哈',
menuLists:[
{id:1,name:"大腰子",price:50},
{id:2,name:"排骨",price:60},
{id:3,name:'肘子',price:830},
],
people:{
name:'寇世龙',
age:21,
fav:'AV'
}
}
},
// 写在构造器中
template:`
<div class='app'>
<h2>{{msg}} </h2>
<p v-text='msg'> </p>
<div v-html='msg2'></div>
<div v-text='1+1'></div>
<div v-if='isShow'>我想你也是爱我的</div>
<div v-if='!isShow'>你也舍不得</div>
<div v-if='Math.random()>0.5'>
已显示
</div>
<div v-else>
已隐藏
</div>
<div v-show='isShow'>显示 </div>
<div v-show='!isShow'>隐藏 </div>
<div class='box' :class='{active:isGreen}' :a='text' v-on:click='clickHeadler'> </div>
<ul>
<li v-for='item in menuLists'>
<h5 v-text='item.id'></h5>
<h3>{{item.name}}</h3>
<em>{{item.price}}</em>
</li>
</ul>
<ul>
<li v-for='(value,key) in people'>
{{key}}==={{value}}
</li>
</ul>
</div>`,
methods:{
clickHeadler(e){
// this.isGreen=!this.isGreen
if(this.isGreen =true){
this.isGreen =false
}else{
this.isGreen=true
}
}
}
})
