vue基础知识总结
初始vue
下面给出的例子，是我对vue最初始的直观感受
如果使用js来写一个计数器，需要先使用dom来选中html元素，然后添加绑定事件
//html
<div>
<button id="sub">-</button>
<span id="count">0</span>
<button id="add">+</button>
</div>
//js
<script>
var sub = document.querySelector('#sub');
var add = document.querySelector('#add');
console.log(count.innerHTML);
console.log(Number(count.innerHTML));
sub.addEventListener('click',()=>{
console.log('sub run');
count.innerHTML -= 1;
if(count.innerHTML < 0){
count.innerHTML = 0;
}
})
add.addEventListener('click',()=>{
console.log('add run');
count.innerHTML = Number(count.innerHTML) + 1;
})
</script>
以上代码是使用js编写的计数器
下面为运用vue编写的计数器
//html
<div id="app">
<h1>{{msg}}</h1>
<count-yan></count-yan>
</div>
//js
<script src="../vue.js"></script>
<script>
let countyan = {
template:` <div>
<button @click='sub'>-</button>
<span >{{count}}</span>
<button @click="add">+</button>
</div>`,
data(){
return {
count:0
}
},
methods:{
sub(){
this.count -= 1;
},
add(){
this.count += 1;
}
}
}
Vue.component('count-yan',countyan)
let app = new Vue({
el:'#app',
data:{
msg:'js计数器'
}
})
</script>
vue相较于之前的代码体，有什么区别？
-
没有dom操作
-
页面分割，组件可以重复利用，减少了代码冗余
知识补充
Vue.component('yan-hui-count',yanhuiCount) //Vue.component() //全局注册组件，可以使用Vue.component(tagName, options) 用法:<yan-hui-count></yan-hui-count>
vue模板语法
vue的模板语
语法： {{js表达式，或者变量引用，函数引用}}
//运算下方实例
//hello yyh
<h1>{{"hello yyh"}}</h1>
//12
<h1>{{12}}</h1>
// 空字符
<h1>{{undefined}}</h1>
##数据响应设置
响应式数据：
- vue中数据，在页面中绑定了，并展示了
- 当数据发生变化时候，页面会自动发生变化，将这样的数据叫做响应式数据
指令
v-html
v-html 是vue中的指令
-
指令：是指带有一定功能的，以v—xx 形式在html上使用的
-
作用：插入一段html片段 相当于innerHTML
-
语法：v-html=“vue变量”
v-test
- 作用：v-test 和 innerText 作用一样
- 语法：v-test=“内容”
###v-if
-
作用：条件判断。满足条件，执行某行为
-
相当于if语句中的if
-
应用：两个相邻兄弟元素只能显示其中一个
v-if 值为 true 销毁v-else
v-if 值为 false 销毁 v-if 创建 v-else
v-else
-
作用： 可以用 v-else 指令给 v-if 添加一个 “else” 块
-
必须跟在v-if后边出现
v-if v-else 应用
应用：两个相邻兄弟元素只能显示其中一个
v-if 值为 true 销毁v-else
v-if 值为 false 销毁 v-if 创建 v-else
v-else-if
-
作用： 用作 v-if 的 else-if 块。可以链式的多次使用
-
v-else 、v-else-if 必须跟在 v-if 或者 v-else-if之后
v-if v-else-if v-else-if v-else
适合：
1：多个相邻兄弟元素，只显示一个元素的时候
2：渲染满足条件的那个
相当于 if else if else 的结构
-
v-show
-
作用： 使用 v-show 指令来根据条件展示元素
v-if 和 v-show 的区别
v-for
- 作用：循环遍历（重复执行多次 重复渲染标签）
- 语法：v-for=“(item,index) in vue变量”
- 参数： item 变量：赋值的是 数组元素 index变量 赋值为数组所用
###v-for和v-if优先级问题
<div id="app">
<ul>
//使用v-for循环遍历list中的内容到页面上
//用v-if 筛选出price大于20的水果
<li v-for="item in list" v-if="item.price>20">
<p>水果名字：{{item.shop}}</p>
<p>价格：{{item.price}}</p>
</li>
</ul>
</div>
<script src="../vue.js"></script>
<script>
//构造vue函数
let app = new Vue({
//选中id=“app”的html元素
el:"#app",
data:{
list:[
{
shop:'苹果',
price:3
}, {
shop:'香蕉',
price:5
}, {
shop:'菠萝蜜',
price:28
}, {
shop:'车里子',
price:77
}, {
shop:'浏览150',
price:3
},
]
}
})
</script>
事件绑定
有两种写法：
-
v-on：事件名=“事件处理函数”
-
@事件名=“事件处理函数”
- 事件名：是js中事件名，没变化
事件修饰符
-
事件修饰符
- .prevent 阻止默认行为
- .stop 阻止冒泡
- .self 只当事件在该元素本身（比如不是子元素）触发时触发回调
- event.target为当前触发元素
- .capture 添加事件侦听器时使用事件捕获模式
- .once 事件只触发一次
-
键盘事件修饰符
- .enter 按下回车
- .tab ：制表键
- .esc ：返回键
- .space: 空格键
- .delete ：含 delete 和 backspace …
-
鼠标按键修饰符
- .left 按下左键
- .right 按下右键
- .middle 滚轮
v-for事件结合使用
<div id="app">
<!--
点击学生时候：
获取点击学生的id
事件对象
触发事件的元素
1：给多个元素绑定事件，同一个事件处理函数
-->
//v-for遍历list元素，并给每个元素都加点击事件 $event 事件对象
<div v-for="item in list" @click = 'handle(item.id,$event)'>
<p>id:{{item.id}}</p>
<p>nam:{{item.name}}</p>
</div>
</div>
<script src="../vue.js"></script>
<script>
let app = new Vue({
el:"#app",
data:{
list:[
{
id:'3123',
name:'liubin'
}, {
id:'12321',
name:'lqz'
}, {
id:'312ds3',
name:'wdh'
}
]
},
methods: {
handle(id,e){
console.log('handle run');
console.log(id);
console.log(e);
// 获取了触发事件元素，可能获取到子元素
console.log(e.target);
}
},
})
</script>
明天见！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
