一.vue的基础知识
-
组件的定义与使用
vue文件的组成- 模板页面<template> - js模块对象<script> - 样式<style>基本使用
- 引入组件 - 映射成标签 - 使用组件标签 -
模块语法
（1）类似于node中的EJS，可以让HTML页面动态化：大括号表达式、指令是以v开头的自定义标签属性
（2）双大括号表达式- 语法：{{exp}} - 内部可以是变量、对象调用、表达式 - 注意一定是要有结果（3）强制数据绑定
（4）绑定事件监听
<template>
<div>
<h3>class使用</h3>
<div :class="oneClass">样式类可以是字符串</div>
<div :class="{oneClass:true,twoClass:true}">样式类可以是对象</div>
<div :class="['oneClass','twoClass']">数组</div>
<div :class="[oneClass,twoClass]">数组可以是数组</div>
<div :style="backgroundColor:bgColor:bgColor,fontSize:fontSize" style="width：300px;height:300px;">style样式使用</div>
</div>
</template>
<script>
export default{
name:"ClassAndStyle",
data(){
return{
oneClass:'classOne'
twoClass:'classTwo'
}
}
}
</script>
<style scoped>
.classOne{
font-size: 20px;
color: rgb(212, 36, 36);
}
.classTwo{
width: 200px;
height: 200px;
background-color: aqua;
}
</style>
- 条件渲染：
(1)v-if/v-else/v-else-if
(2)v-show
<template>
<div>
<div v-if="flag">今晚要上课</div>
<div v-else>今晚不上课</div>
<button @click="flag=!flag">切换</button>
<p>---------------------------------</p>
<div v-show="flag">今晚要上vue</div>
<div v-show="!flag">今晚不上vue</div>
<button @click="flag=!flag">切换</button>
</div>
</template>
<script>
export default{
name:"IfAndShow",
data(){
return{
flag:true,
}
}
}
</script>
<style scoped>
</style>
- 列表渲染
- （1）数组遍历：v-for="(person,index) in person",{{index}})姓名：{{person.name}}，年龄：{{person.age}},性别：{{person.sex}}
- （2）对象遍历
- （3）为什么要绑定key：给每一个虚拟结点给定一个id，更准确和更快速的拿到对应得分vnode结点。key无法复用
<div v-for="(person,index) in person" :key="index"></div>
- (4)过滤遍历
- 5）排序遍历
- 其它常用和指令和自定义指令
v-text、v-html、v-show、v-if、v-else、v-for、v-on、v-bind、v-model、v-slot、v-pre、v-cloak、v-once
<template>
<div>
<p>{{content}}(like iT,IT like)</p>
<p v-text="content">(like iT,IT like)</p>
<p v-html="content"></p>//不建议使用，在网站上动态渲染任何HTML可能会收到xss的袭击
<p v-pre>{{intro}}</p>//不要寻软
<p v-cloak>{{message}}</p>
<p v-once>{{name}}</p>
<p v-once>{{name}}</p>//只渲染匀速和组件一次，随后的重新渲染
<input type="text" placeholder="请输入姓名" v-model="name">
<p ref="fish">我是一只鱼</p>
<button @click>输出内容</button>
</div>
</template>
<script>
export default{
name:"OtherInstruct",
data(){
return{
content:'<a href="http://www.baidu.com">师范学院</a>',
intro:'Like It'，
message:'自动打开下一课时',
name:'小刘'
}
},
methods{
log(){
//console.log(this.$refs.fish);
console.log(this.$refs.fish.innerHtml);
}
}
}
</script>
<style scoped>
[v-cloak]{
display:none;
}
</style>
自定义指令
- 自定义全局指令：
Vue.directive（id:'upper-word',definiton:(el,binding)=>{
console.log(el,binding);
el.textContent=bindign.value.toUpperCase();
}）//（注册全局指令）
- 自定义局部指令:直接在methods中directive{}（凡是指令都要加v-）
