vue笔记

简单实现

1. 引入Vue.js
2. 创建Vue对象
el : 指定根element(选择器)
data : 初始化数据(页面可以访问)
3. 双向数据绑定 : v-model  :一旦写上v-model 马上去定义data.
4. 显示数据 : {{xxx}}
5. 理解vue的mvvm实现

强制绑定 && 绑定时间监听

1. 模板的理解:
  动态的html页面
  包含了一些JS语法代码
	大括号表达式
	指令(以v-开头的自定义标签属性)
2. 双大括号表达式
  语法: {{exp}} 或 {{{exp}}}
  功能: 向页面输出数据
  可以调用对象的方法
***
3. 指令一: 强制数据绑定
  功能: 指定变化的属性值
  完整写法:
	v-bind:xxx='yyy'  //yyy会作为表达式解析执行
  简洁写法:
	:xxx='yyy'
***
4. 指令二: 绑定事件监听  
  功能: 绑定指定事件名的回调函数
  完整写法:
	v-on:click='xxx'
  简洁写法:
	@click='xxx'

计算属性 & 监视属性

1. 计算属性 get  set
  在computed属性对象中定义计算属性的方法
  在页面中使用{{方法名}}来显示计算的结果
	computed: {
	  fullName1 () { // 属性的get()
		console.log('fullName1()', this)
		return this.firstName + '-' + this.lastName
	  },
	  fullName3: {
		// 当获取当前属性值时自动调用, 将返回值(根据相关的其它属性数据)作为属性值
		get () {
		  console.log('fullName3 get()')
		  return this.firstName + '-' + this.lastName
		},
		// 当属性值发生了改变时自动调用, 监视当前属性值变化, 同步更新相关的其它属性值
		set (value) {// fullName3的最新value值  A-B23
		  console.log('fullName3 set()', value)
		  // 更新firstName和lastName
		  const names = value.split('-')
		  this.firstName = names[0]
		  this.lastName = names[1]
		}
	  }
},
2. 监视属性:
  通过通过vm对象的$watch()或watch配置来监视指定的属性
  当属性变化时, 回调函数自动调用, 在函数内部进行计算
3. 计算属性高级:
  通过getter/setter实现对属性数据的显示和监视
  计算属性存在缓存, 多次读取只执行一次getter计算

CLASS 和样式

1. 理解
  在应用界面中, 某个(些)元素的样式是变化的
  class/style绑定就是专门用来实现动态样式效果的技术
2. class绑定: :class='xxx'
  xxx是字符串
  xxx是对象
  xxx是数组
3. style绑定
  :style="{ color: activeColor, fontSize: fontSize + 'px' }"
  其中activeColor/fontSize是data属性


组件：局部功能界面

**** 数据在哪, 更新数据的行为(函数)就应该定义在哪

// 1：查分组件
Nav.vue  Header.vue  Conent.vue Footer.vue  等
放到src 中的components中

文件： App.vue

组件间通讯：通过标签属性，最好是同名
// 模板如下:页面三元素
<template>
	<div>
		<Nav/> //标签写入
		<Footer :comments="comments" :addComment='addComment'/> //组件间通讯使用标签属性的方式 记得要写‘:’冒号  2:将addComment方法传递过去
	</div>
	
</template>
<script>
	import Nav from './components/Nav.vue' //引入组件页  子页面
	import Footer from './components/Footer.vue' //引入组件页  子页面
	export default{
		data(){		//组件中 数据必须写成函数  返回一个对象
			return{ //返回一个数组
				comments:[  //内是个一个一个的对象
					{
						name:'bob',
						content:'vue 1'
					},
					{
						name:'bob1',
						content:'vue 11'
					}
				]
			}
		},
		methods:{
			addComment(commnent){
				this.comments.unshift(commnet)
			}
		},
		components:{// 映射成标签
			Nav,
			Footer
		}
	}
</script>
<style>
</style>

// Footer.vue 内容如下

一个组件想要接受父组件的数据，必须有‘声明’的概念
<template>
	<div>
		<ul>
			<MyText v-for="(comment,index) in comments" :key='index' :comment='comment' :index='index'/>//此处的comment 是comments的一次循环值
		</ul>
	</div>
	<input type='button' @click="add" v-model='name' >//1:使用@绑定事件监听 
</template>
<script>
	import MyText from './components/MyText.vue' //引入组件页
	export default{
		data(){
			return {
				name:'',
			}
		},
		//声明 接受属性:这个属性就会成为组件对象的属性 在子组件中可以查看该属性  组件对象
		//props:['comments'],//简单写法
		props:{
			comments:Array,
			addComment:{
				type:Function,
				required:true
			}
		}
		methods:{
			add(){
				// 获取数据
				const name=this.name.trim()
				// 1：检查合法性
				...
				// 2：根据数据封装成一个comment对象,此处的数据必须和comments中的数据格式一样
				const comment = {
					name
				}
				// 3：添加到comments  此处调用的是 App.vue 中的方法 该方法通过 “:+属性” 方式传递过来
				this.addComment(comment)
				//4：清除输入
				this.name=''
			}
		}
	}
	components:{
		MyText
	}
</script>
<style>
</style>

// MyText.vue的内容如下

<template>
	<div>
		<li> {{ comment.name}}说:{{ comment.content}} </li>
	</div>
</template>
<script>
	export default{
		//声明 接受属性  第二种书写方式
		props:{
			comment:Object
			index:Number
		}
	}
</script>
<style>
</style>

// 2：写入口文件 main.js

/* 入口JS */
// 引入文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'

/* eslint-disable no-new */
new Vue({
  el: '#app',
  components: {App}, // 映射组件标签
  template: '<App/>', // 指定需要渲染到页面的模板
  router  // 注册路由器
})

// 静态组件