<template>
<div>
姓{{y}}, 名{{s}}, 全名叫{{ys}}
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
y:'杨',
m:'少辉',
}
},
computed: {
ys: function(){
return this.y + this.s
}
}
}
</script>
计算属性
1）在 computed 属性对象中定义计算属性的方法
2）在页面中使用{{方法名}}来显示计算的结果
常用内置指令
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 强制绑定解析表达式, 可以省略 v-bind
9）v-model : 双向数据绑定
10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
1）v-text : 更新元素的 textContent
2）v-html : 更新元素的 innerHTML
3）v-if : 如果为 true, 当前标签才会输出到页面
4）v-else: 如果为 false, 当前标签才会输出到页面
5）v-show : 通过控制 display 样式来控制显示/隐藏
6）v-for : 遍历数组/对象
7）v-on : 绑定事件监听, 一般简写为@
8）v-bind : 强制绑定解析表达式, 可以省略 v-bind
9）v-model : 双向数据绑定
10）ref : 指定唯一标识, vue 对象通过$refs 属性访问这个元素对象
11）v-cloak : 防止闪现, 与 css 配合: [v-cloak] { display: none }
自定义指令
注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
注册全局指令
Vue.directive('my-directive', function(el, binding){ el.innerHTML = binding.value.toupperCase()
})
2）注册局部指令
directives : {
'my-directive' : {
bind (el, binding) {
el.innerHTML = binding.value.toupperCase()
}
}
}
3）使用指令
v-my-directive='xxx'
类与样式
class 与 style 绑定
class 绑定
1）:class='xxx'
2）表达式是字符串: 'classA'
3）表达式是对象: {classA:isA, classB: isB}
4）表达式是数组: ['classA', 'classB']
style 绑定
1）:style="{ color: activeColor, fontSize: fontSize + 'px' }"
2）其中 activeColor/fontSize 是 data 属性
事件处理
绑定监听:
1）v-on:xxx="fun"
2）@xxx="fun"
3）@xxx="fun(参数)"
4）默认事件形参: event
5）隐含属性对象: $event
事件修饰符
1）.prevent : 阻止事件的默认行为 event.preventDefault()
2）.stop : 停止事件冒泡 event.stopPropagation()
按键修饰符
1）.keycode : 操作的是某个 keycode 值的键
2）.keyName : 操作的某个按键名的键(少部分)
父子组件通信
组件间通信基本原则
1）不要在子组件中直接修改父组件的状态数据
2）数据在哪, 更新数据的行为(函数)就应该定义在哪
此方式用于父组件向子组件传递数据
2）所有标签属性都会成为组件对象的属性, 模板页面可以直接引用
3）问题:
a.如果需要向非子后代传递数据必须多层逐层传递
b.兄弟组件间也不能直接 props 通信, 必须借助父组件才可以
axios是什么？怎么使用？描述使用它的流程？
请求后台资源的模块。
使用npm install axios --save命令安装好，
js中使用时先import导入进来，
然后调用.get()或.post()发送请求。
如果成功返回在.then函数中，
失败则是在.catch函数中
vue-router是什么？它有哪些组件？
是vue用来写路由的一个插件。
组件router-link相当于超链接，to属性相当于超链接的href属性，最终会被解析为超链接、
router-view用于加载路由对应的组件，显示模板内容
网友评论