Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统
响应式布局
基础语法 双括号和指令
{{ xxx}} ==>写在HTML标签中的变量(<div>{{foo}}</div>)
双括号可以填写的内容有:变量。表达式。函数,三目运算(data中的数据,和)
<div>{{foo()|| foo>0?2:3 || foo}}</div>
当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data
对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。
new Vue({
el: '#demo', //当前父级dom
data: { //存放数据
foo: "foo",
bar: 'bar',
num: 0,
value: 'bai'
},
methods: { //普通函数
add: function () {
this.num++
}
},
computed: { //计算属性函数 监听数据第一种方法 里面为同步类型的函数 只监听与自己有关的数据
change: function () {
return this.num > 5 ? '大于5' : '小于5'
}
},
watch: { //监听第二种方法 里面可以为异步类型的方法
num: function () { //监听谁就用谁做函数名,因为你
var self = this
if (self.num > 6) {
setTimeout(function () {
self.num = 0
}, 1000)
}
}
},
})
new的时候会把data和methods的全部挂到Vue这个对象上
v-on:xxx (绑定某某事件,简写@)(对于绑定事件的处理函数如果没有传参,那么他的默认第一个参数为事件源对象)
v-bind:xxx (标签内,比如a标签的href)简写:
v-noce 固定值
v-html 后面写需要渲染的dom节点(把数据当成dom节点分析)不到万不得已不去使用
v-on:fn 和 v-on:fn(a,b)
第一种不传参,函数执行时,默认第一位形参为事件源对象 第二种传参为自定义参数,如果第二种情况需要获取到事件源对象
需要特定的参数格式:$event
事件修饰符:阻止冒泡,阻止事件默认行为
传统方式阻止:给子dom添加事件,然后事件函数添加 e.stopPropagation
Vue方式:v-on:mousemove.stop ==>阻止了冒泡
相对应的还有一个阻止事件默认行为:
v-on:mousemove.prevent ==>取消默认事件行为 (支持链式调用)
按键修饰符:
v-on:keyup.enter ==> 当键盘按enter时候回触发对应的事件函数 (也支持多键调用,也可以输入相对应的键值(13))
组合键。。
v-model
指令,它能轻松实现表单输入和应用状态之间的双向绑定。
计算属性:computed:{ 函数} //监听数据第一种方法 (同步代码,当数据发生变化就会立即执行操作)
和函数执行不同的两点:
1.不用写() 函数会自己执行
2.和函数无关时候不会执行
watch :{函数} //监听数据第二种方法 (可以写异步操作)
computed 和 wacth 的区别:
computed 需要返回值 wacth只需要逻辑操作
动态添加样式:
方式一:动态添加class(类的增删改查)
方式二:动态改变内联style (属性的增删改查)
Vue给v-bind:class 和v-bind:style 进行了 特殊的包装 , 一般后面跟着的是一个变量,但是这里给他们添加了一个对象形式
可以直接写相对应的类和属性
<div class="demo" @click="isCircle=!isCircle" :class="{circle:isCircle}"></div>
isCircle 定义在data中的一个变量 ,circle定义在CSS上的一个class类。(:class=“{这里是一个对象}”)
当isCircle 的布尔值为真的时候,就添加上circle这个class
针对于要添加多个class的时候 有一下写法:
<div class="demo" @click="isCircle=!isCircle" :class="addclass"></div>
methods: {
addclass:function(){
return{
circle: this.isCircle,
blue: !this.isCircle
}
}
}
style也有相类似的写法
写在对象内:
<div class="demo" :style="{borderRadius:'50%'}"></div>
当是变量的时候:
<div class="demo" :style="add"></div>
computed: { //计算属性函数
add: function () {
return {
borderRadius:'50%'
}
}
v-if
v-else-if
v-else
teplate 标签(包裹标签 自己不占dom结构)相当于一个容器 容器标签
v-show ———— 给dom元素添加了隐藏属性 display:none(还能再次查找)
列表渲染:
v-for = "(item index 。。。) on xxx" 循环 遍历一个数组或者对象 数字 字符串。。。
想直接改变数组内的元素是无法检测到的 必须传新的数组(新地址)
数组的push方法被Vue重写 其他方法也有 改变数据会被监测
v-bind:key="xx" 给标签独一无二的属性
组件系统是 Vue 的另一个重要概念
Vue使用注意:
不要在选项属性或回调上使用箭头函数,
比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。
因为箭头函数是和父级上下文绑定在一起的,this 不会是如你所预期的 Vue 实例,
经常导致 Uncaught TypeError: Cannot read property of undefined
或 Uncaught TypeError: this.myMethod is not a function 之类的错误。
组件库:
自定义标签
Vue.component()
Vue.component("my-div", { //组件标签名
//组件必须有根节点
template: `
<div>
<h1>联系方式</h1>
<p>联系电话{{el}}</p>
</div>`,
data:function(){ //data数据必须以函数形式,返回对象与new的Vue实例不同
return{
el:122312412412
}
}
})
new Vue({
el: "#app"
})
为什么data为函数:如果组件里data为一个对象。那么创建多个组件时候。一个组件的data数据改变了另外组件的数据也会跟着变。这不是我们想要的!!!
全局组件和局部组件:上面的是全局都可以使用的组件。下面写在一个Vue实例里只有他自己能调用
var com = { //组件标签名
//组件必须有根节点
template: `
<div>
<h1>联系方式</h1>
<p>联系电话{{el}}</p>
</div>`,
data: function () { //data数据必须以函数形式,返回对象与new的Vue实例不同
return {
el: 122312412412
}
}
}
// Vue.component("my-div" )
new Vue({
el: "#app",
components: { //局部组件库
'my-div':com
}
})
组件:
子传父:props: