9月5日vue学习笔记
发布时间：
本文字数：1,428 字 阅读完需：约 5 分钟
模板语法
关键字：template
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9月5号</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
宁波加油！
</div>
<script>
new Vue({
el:'#app',
template:'<div>长春加油{{msg}}</div>',
data:{
msg:'!'
}
})
</script>
</body>
</html>
模板template内的内容对#app内的内容进行全部覆盖，所以显示效果为长春加油
ES6新语法
用``替代''，可以在句中直接进行换行
rander
<body>
<div id="app">
宁波加油！
</div>
<script>
new Vue({
el:'#app',
render(h) {
return h('h1',{style:'background-color:red'}, '长春加油')
},
data:{
msg:'!'
}
});
</script>
</body>
rander:新建一个元素，上述例子则是新建了一个<h1>标签
观察属性
观察属性：监听属性，会监听当前实例对象或组件对象的数据属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>9月5号</title>
<script src="js/vue.js"></script>
<style>
body{
background-color: black;
color: white;
}
</style>
</head>
<body>
<div id="app">
账号: <input type="text" v-model="userId"> </div>
<script>
new Vue({
el:'#app',
data:{
userId:''
},
watch:{
userId: function(newValue, oldValue){
console.info(oldValue);
console.info(newValue);
}
}
});
</script>
</body>
</html>
上面是监听的简写，以下为完全体
<body>
<div id="app">
账号: <input type="text" v-model="userId"> </div>
<script>
new Vue({
el:'#app',
data:{
userId:''
},
watch:{
userId: {
handler(newVal,oldVal){
console.info(oldVal);
console.info(newVal);
},
deep: true, //是否深度监听，监听对象时同时监听对象的属性值是否改变，而不是只监听对象内存地址的变化
immediate: true
},
}
});
</script>
</body>
计算属性
计算属性：用于处理页面的复杂逻辑
关键字: computed
<body>
<div id="app">
姓: <input type="text" v-model="firstName"/>
名: <input type="text" v-model="lastName"/>
</div>
<script>
new Vue({
el:'#app',
data:{
firstName:'',
lastName:''
//fullName是计算属性，不要在data中定义
},
computed:{
//默认情况下，function为fullName的get方法，也就是赋值方法
fullName: function(){
return this.fullName+this.lastName;
}
}
});
</script>
</body>
完全体：带set方法
<body>
<div id="app">
姓: <input type="text" v-model="firstName" />
名: <input type="text" v-model="lastName" />
</div>
<script>
let vm = new Vue({
el: '#app',
data: {
firstName: '',
lastName: ''
//fullName是计算属性，不要在data中定义
},
computed: {
fullName: {
//当给fullName赋值时触发
set: function (newVal) {
let data = newVal.split(".");
this.firstName = data[0];
this.lastName = data[1];
},
//默认情况下，function为fullName的get方法，也就是赋值方法
get: function () {
return this.fullName + this.lastName;
}
}
}
});
vm.fullName = '李.雷'
</script>
</body>
实例：字符串实时反转
<body>
<div id="app">
文字: <input v-model="origin" /> 反转：{{reverse_t}}
</div>
<script>
new Vue({
el:'#app',
data:{
origin:"",
},
computed:{
reverse_t(){
let arr = this.origin.split("");
arr = arr.reverse();
return arr.join("");
}
}
});
</script>
</body>
vue组件式开发
组件的定义
组件：html/css/js的组合
目的：复用代码
使用方法实例：
<body>
<div id="app">
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
<my-com></my-com>
</div>
<script>
//注册全局组件(横杠命令方式)
Vue.component('my-com',{
template: `<div>我是全局组件</div>`
})
new Vue({
el:'#app',
data:{
},
});
</script>
</body>
结果：
我是全局组件
我是全局组件
我是全局组件
我是全局组件
局部组件
<body>
<div id="app">
<my-com></my-com>
<one></one>
<two></two>
</div>
<script>
//注册全局组件(横杠命令方式)
Vue.component('my-com',{
template: `<div>我是全局组件</div>`
})
let con1 = {
template:`<div>我是局部组件1</div>`
}
let con2 = {
template:`<div>我是局部组件2</div>`
}
new Vue({
el:'#app',
data:{
},
//局部组件在此声明注册即可
components:{
'one': con1,
'two': con2
}
});
</script>
</body>
spa应用：每一个网页作为一个组件嵌入
<div id="app">
<my-com></my-com>
<one></one>
<two></two>
<three></three>
</div>
<script>
//注册全局组件(横杠命令方式)
Vue.component('my-com',{
template: `<div>我是全局组件</div>`
})
let con1 = {
template:`<div>我是局部组件1</div>`
}
let con2 = {
template:`<div>我是局部组件2</div>`
}
let con3 = {
template:`<div>我是局部组件3{{msg}}</div>`,
data() {
return {
msg:'!'
}
},
}
new Vue({
el:'#app',
data:{
},
components:{
'one': con1,
'two': con2,
'three':con3
}
});
</script>
生命周期和钩子函数
<body>
<div id="app">
<three></three>
</div>
<script>
let con3 = {
template: `<div>我是局部组件3{{msg}}</div>`,
data() {
return {
msg: '!'
}
},
created() {
console.info("created");
},
mounted() {
console.info("mounted")
},
}
new Vue({
el: '#app',
data: {
},
components: {
'three': con3
}
});
</script>
</body>
父子组件
套用关系
<div id="app">
<parent></parent>
</div>
<script>
let child = {
template:`<div>我是子组件</div>`
}
let parent = {
template:`<div>我是父组件<child></child></div>`,
components: {
'child':child
}
}
new Vue({
el: '#app',
data: {
},
components: {
'parent':parent
}
});
</script>
属性的传递
prop关键字用于子组件接收父组件传过来的参数
示例：
<body>
<div id="app">
<parent></parent>
</div>
<script>
let child = {
props:['name'],//prop关键字用于接收父组件传过来的属性名为name的参数
template:`<div>我是子组件, {{name}}</div>`
}
let parent = {
template:`<div>我是父组件<child :name="msg"></child></div>`,
components: {
'child':child
},
data() {
return {
msg:"来自父组件的问候！"
}
},
}
new Vue({
el: '#app',
data: {
},
components: {
'parent':parent
}
});
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<title>主页</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<parent></parent>
</div>
<script>
let child = {
props: ['user'],
template: /*html*/`
<div>
<div>姓名:<input v-model="person.name" /></div>
<div>性别:{{user.sex}}</div>
<div>年龄:{{user.age}}</div>
<div>住址:{{user.address}}</div>
</div>'`,
data() {
return {
//初始化person对象
person:{}
}
},
watch:{
user: function (val) {
//对象克隆，把val对象里的属性和方法克隆给person对象，新对象内存地址和val不同，达到解绑的目的
this.person = Object.assign({},val);
}
}
}
let parent = {
template: `
<div>
<div v-show="show"><child :user="user" ></child></div>
<h2>信息表</h2>
<table border="1">
<thead>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>住址</th>
<th>操作</th>
</thead>
<tbody>
<tr v-for="user in dataList">
<td>{{user.name}}</td>
<td>{{user.sex}}</td>
<td>{{user.age}}</td>
<td>{{user.address}}</td>
<td><button @click="edit(user)" >修改</button></td>
</tr>
</tbody>
</table>
</div>`,
data() {
return {
dataList: [{name: '李雷', sex: '男', age: 20, address: '宁波'}, {name: '韩梅梅', sex: '女', age: 18, address: '长春'}],
show: false,
user: {}
}
},
methods: {
edit(user){
this.show = true;
this.user = user;
}
},
components: {
'child': child
}
}
new Vue({
el: '#app',
data: {},
components: {
'parent': parent
}
});
</script>
</body>
</html>
动态组件
关键字: <component :is="val"></component>
在切换的过程中，未被激活的动态组件会被销毁
例子：点击对应按钮，加载相应的组件
<body>
<div id="app">
<parent></parent>
</div>
<script>
let ch1 = {
template: `<div>子组件1</div>`
}
let ch2 = {
template: `<div>子组件2</div>`
}
let ch3 = {
template: `<div>子组件3</div>`
}
let parent = {
template:/*html*/`<div>
<button @click="change(1)">1</button><button @click="change(2)">2</button><button @click="change(3)">3</button>
<!-- keepalive 不销毁组件，而是存入内存，等待下次加载 -->
<keep-alive>
<!-- 动态组件 -->
<component :is="val"></component>
</keep-alive>
</div>`,
components:{
'ch1':ch1,
'ch2':ch2,
'ch3':ch3
},
data() {
return {
val: 'ch1'
}
},
methods: {
change(i){
this.val = 'ch' + i;
}
},
}
new Vue({
el: '#app',
data: {
},
components: {
'parent':parent
}
});
</script>
</body>
递归组件
示例
myCom是对象名，my-com是在Vue中的父组件名，com是作为子组件的myCom名，以进行递归
<body>
<div id="app">
<my-com></my-com>
</div>
<script>
let myCom = {
template:/*html*/`
<div><button @click="getChild()">递归组件</button><com v-if="show"></com></div>
`,
name:'com',
data() {
return {
show:false
}
},
methods: {
getChild(){
this.show=myCom
}
},
}
new Vue({
el: '#app',
data: {
},
components: {
'my-com': myCom
}
});
</script>
</body>
异步组件
vue允许以工厂函数的方式定义组件，这个工厂函数会异步解析组件定义，只有在组件需要渲染的时候才会触发该工厂函数，且把结果缓存起来供未来重新渲染。
<body>
<div id="app">
<my-com></my-com>
</div>
<script>
Vue.component('my-com', function(resolve, reject){
setTimeout(function(){
resolve({
template: `<div>我是异步组件</div>`
})
}, 3000)
})
new Vue({
el: '#app',
data: {
}
});
</script>
</body>
Powerd by YlBlog(玉龙博客)