Vue2.5开发基础学习
vue基础
- 注意： vue不支持低版本浏览器内容
使用vue.js 实现hello world
// 如何在页面上实现一个简单的hello world
// 1. 方式1: 原生的方式
var app = document.getElementById('app')
app.innerHTML = 'hello world'
// 2. 方式2: vue的方式
// 引入vue的cdn
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
const app = new Vue({
el: "#app",
data: {
content: 'hello world'
}
})
使用vuejs实现ToDolist
v-for循环指令v-on绑定指令v-on:clickv-modelinput的数据双向绑定
代码演示
<div id="app">
<input type="text" v-model='inputVal'>
<button v-on:click="add">添加</button>
<ul>
<li v-for=" item in list">{{ item }}</li>
</ul>
</div>
//
const vm = new Vue({
el: '#app',
data: {
list: ['a', 'b'],
inputVal: ''
},
methods:{
add() {
this.list.push(this.inputVal)
this.inputVal = ''
}
}
})
MVVM 设计模式
MVP模式 --- M-模型层 V-视图 P- 控制器
前端组件化
v-bind: 组件绑定值， 自组件可以用props 接收一个值
Vue.component() 全局组件化创建
- 也可以在实列上添加组件
vue基础精讲
— vue 的组件是一个实例组成的
基础详细
v-on简写方式@v-bind简写方式:
注意： 凡事$ 的都是vue实例的方法和属性
简单的组件传值
子组件向父组件传值
this.$emit('delete') 使用$emit 方法向外（向上一层）传递一个事件
在父组件中监听delete事件
@delete='change' 在父组件的方法中写change
vue的生命周期的钩子
生命周期就是vue实例在某一个 时间点 会自动执行的函数
const vm = new Vue({
el: '#app',
data: {
test: 'hello world'
},
beforeCreate() {
console.log(this.$el)
console.log('beforeCreate')
},
created() {
console.log(this.$el)
console.log('created')
},
beforeMount() {
console.log(this.$el)
console.log('beforeMount')
},
mounted() {
console.log(this.$el)
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdated')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('Destroyed')
}
})
vue的模版语法
v- 后接的内容都是js表达式
v-text
插值表达式
v-html 支持html内容
计算属性，和监听器
- computed 计算属性
- 内置缓存，提升性能、
- methods 方法实现
- watch 监听器
计算属性的setter 和 getter
计算属性中的get, 和set方法一般情况下不使用，如果需要改变计算属性的值，那么必须存在set方法
计算属性默认只有 getter ，不过在需要时你也可以提供一个 setter ：
const vm = new Vue({
el: '#app',
data: {
firstName: 'zhu',
lastName: 'yaogeng'
},
computed: {
fullname: {
// getters
get() {
return this.firstName + this.lastName
},
// setter
set(value) {
const name = value.split(' ')
this.firstName = name[0]
this.lastName = name[1]
}
}
}
})
vue 中如何绑定样式
如何快速的实现样式绑定呢，
- class 方式
:class="{calssname: 变量}"方式1； class的对象绑定:class="[activeted]", 方式2；数组的方式
- style 方式
:style="{ color: 'red'}"对象的方式:style="[{ color: red}]"数组方式
vue 的条件渲染
vue的条件渲染 ，v-if， v-show
V-if和v-show的区别
v-show是display: none，v-if 是dom的删除和添加
在vue项目中，可以使用v-if 和 v-else
v-if="show === a" 方式使用
<input /> // dom 的复用。diff算法 ， 需要加一个key值，解决条件该改变，dom没有被更新的问题
vue中的列表渲染
v-for做数组循环.
不建议使用index作为key值
<div v-for='(item, index) in item' :key="index">
</div>
-
尝试修改数组的内容时，不能直接给数组赋值
1.直接更改数组的引用
2.可以用以下的改变数组，通过视图更改数组(变异方法)
- push
- pop
- shift
- unshift
- splice
- sort
- reverse
tmplate模版占位符
- 语法中循环对象
<div v-for="(item, key, index) in obj"></div>
- 对象更改数据，也需要更改对象的引用方法
Vue的set方法
- 对象的方法
// 通过Vue.set方法更改值
Vue.set(vm.userInfo, 'address', 'beijing')
vm.$set(vm.userInfo, 'address', 'beijing')
- 数组的方法
Vue.set(vm.userInfo, 1, 5) // 通过数组下标的方法去使用
vm.$set(vm.userInfo, 2, 10)
深入理解vue组件的细节
is属性, 组件如果不能正常的渲染到指定的位置化，建议是用以下的问题
<tr is="row"></tr>
组件中的data 必须是一个函数，函数中需要返回一个对象
data:function() {
return {
content: ''
}
}
// 因为子组件不仅只调用一次，组件会调用多次，为了让每一个字组件的都有一个独立的数据空间，避免数据污染
vue在必要的情况下，操作dom. 通过ref 来操作dom
- 标签通过ref 是获取一个标签
<div ref='hello'>
</div>
this.$refs.hello // 获取dom节点
- 如果是组件，通过ref，则获取的是组件的实例
this.$emit('change') // 实际上，可以看成是一个发布订阅模式
<!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>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<div ref='div'>{{ msg }}</div>
<do ref='one' @change='change'></do>
<do ref='two' @change='change'></do>
total-------<span>{{ total }}</span>
</div>
<script>
Vue.component('do', {
data: function() {
return {
count: 0
}
},
template: '<div v-text="count" @click="change"></div>',
methods: {
change() {
this.count = ++this.count
this.$emit('change')
}
}
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello world',
total: 0
},
methods: {
change() {
// console.log('ok')
this.total = this.$refs.one.count + this.$refs.two.count
}
},
mounted() {
console.log(this.$refs.div, 'ok')
}
})
</script>
</body>
</html>
详细介绍父子组件之间的传值
父组件如何向子组件传值
- 通过属性的方式传递
<counter :count="0"></counter>
props: ['count'],
template: '<div>{{ count }}</div>'
// 单向数据流---- ， 可以改变自身的data, 如果直接改变props,vue会报警告
单向数据流 可以通过拷贝副本，进行
子组件向父组件传值，通过事件的$emit()方式
$emit('change', 参数)
vue组件参数校验 与非 Props特性
props 参数校验， props 特性，
props 特点：不会在dom标签上显示，父给子传，子能拿到
// 方式1
props: {
content: Number
}
// 方式2 多种类型
props: {
content: [Number, String]
}
// 方式3
props: {
content: {
type: String,
required: false, // 可以不传
default: '默认值',
validator: function(value) { // 对值进行校验
return (vlaue.length > 5) // 自定义校验器
}
}
}
非props 特性
- 特性：
- 外层传递，不接受的话，不能使用
- 非props 属性会展示在子组件最外层标签上