vue知识总结
最近系统的学习了vue,现在做一个vue的总结。
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,方便与第三方库或既有项目整合。
你要先创建一个 .html 文件,然后通过如下方式引入 Vue:
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
之后使用vue渲染
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
el就是Vue实例挂载的元素节点,值可以是 CSS 选择符,或实际 HTML 元素,或返回 HTML 元素的函数。
data就是数据的存放位置
{{}}
可以理解为 可执行简单js 解析data数据地方
v-text
把data 数据显示出来
v-html
把data数据显示出来(解析html字符串)
v-bind:属性
绑定html标签属性
v-bind:title = “ti” 简写方式为 :属性 :title = “ti”
条件渲染
- v-show=“表达式”
当表达式为真显示内容,为假不显示内容
2.v-if=“表达式”
<p v-if="true">现在你看到我了</p>
当表达式为真显示内容,为假不显示内容
3.v-show 通过css方式隐藏显示元素
v-if 通过移除html标签显示隐藏
4.v-else
列表渲染
<p v-for=“(item,index)in list” :key="index">{{item}} --{{index}}<p>
循环显示列表元素
事件绑定
v-on:事件名称
@:事件名称
v-on:click=“show”
@click=“show”
事件写一个相对应的方法
事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹的数据逻辑,而不是去处理 DOM 事件细节。
为了解决这个问题,Vue.js 为 v-on 提供了事件修饰符。之前提过,修饰符是由点开头的指令后缀来表示的。
.stop
.prevent
.capture
.self
.once
.passive
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理,然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件,但是像单选框、复选框等类型的输入控件可能会将 value 特性用于不同的目的。model 选项可以用来避免这样的冲突:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Vue 模板语法</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<h1>表单绑定</h1>
<input type="text" v-model="msg">'
<p>{{msg}}</p>
<input type="checkbox" v-model="flag"> 同意我们的条款<br>
<button :disabled="!flag">登录</button>
<p>{{flag}}</p>
<hr>
性别 : <input type="radio" value="男" v-model="gender" name="gender">男
<input type="radio" value="女" v-model="gender" name="gender"> 女
<input type="radio" value="保密" v-model="gender" name="gender"> 保密
<p>{{gender}}</p>
爱好: <input type="checkbox" value="看书" v-model="fav" name="fav2"> 看书
<input type="checkbox" value="听歌" v-model="fav" name="fav2"> 听歌
<input type="checkbox" value="看电影" v-model="fav" name="fav2"> 看电影
<p>{{fav}}</p>
</div>
<script>
new Vue({
el:"#app",
data:{
msg:"你好vue",
flag:false,
gender:"男",
fav:[]
},
methods: {
},
})
</script>
</body>
</html>
实列属性
el:
vue模板范围
data
vue的数据存放中心
methods
vue存放方法中心
computed
定义:从现有数据计算出新的数据
computed:{
olist(){return this.list.filter(item=>item.age>18)}
}
watch
定义:时时检测一个数据的变化-只要数据发送任何改变 都能检测
watch:{
“检测的数据名”:{
handler:function(nval,oval){ //数据变化时的操作}
}
}
created
数据在模板里渲染完毕,组件创建完毕 回调函数
directives 指令
定义:能让我们获取当前指令所在的html元素
模式
inserted
bind
updated
默认 bind 和updated
myfocus:function(el,obj){
// el指令所在html标签
// obj.value 指令的值
}
调用 v-myfocus=“flag”
vue动画
transition
动画指令
name 动画的名称
mode
动画模式
先进还是先出
in-out
out-in
enter-active-class
进入时候调用类名
leave-active-class
离开的时调用的类名
transition-group
动画组指令
定义
在动画指令里面,如果有元素的显示或者隐藏会自动添加相对应的类名
动画组-需要指定 :key
默认class名
v-enter-active
进入过程
v-enter
进入初始状态
v-enter-to
进入结束状态
v-leave-active
离开的过程
v-leave
离开初始状态
v-leave-to
离开结束状态
组件
- 定义
let child = {template:<div>...</div>
} - 注册
components:{child}
3.使用
当html标签
vuehtml知识总结