vue

Posted 2020-09-10 蛋Mrs炒饭

安装淘宝镜像   npm install -g cnpm --registry=https://registry.npm.taobao.org
# 最新稳定版
npm install -g vue
# 全局安装 vue-cli
npm install -g vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack my-project
# 安装依赖，走你
cd my-project
npm install
npm run dev

Vue.js组件的重要选项可以在new一个vue对象的时候设置其属性，其中最重要的包括三个，分别是：data、methods、watch。
其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象监听的方法。


data:      代表vue对象的数据
methods:   代表vue对象的方法
watch:     设置对象监听的方法

数据渲染：v-text、v-html、{{}} html和vue对象的粘合剂

模板指令 v-if v-show 控制显示隐藏 v-if直接不显示，v-show通过css的display:none来隐藏

渲染循环列表 v-for 
事件绑定 v-on methods里的方法
属性绑定 v-bind

vue有三个属性，data(数据),methods（方法）,watch（对象监听）；
html指令v-text(渲染数据)，v-if（控制显示），v-on（绑定时间），v-for（循环渲染）

vue.js的重要选项：data (model层，对象的数据)，methods（代表vue对象的方法），watch监听设置监听的方法（）；
模板指令 - html和vue对象的粘合剂：
数据渲染  {{}}（数据双向绑定）、 v-text（格式处理了html） 、v-html（保存html结构）
控制模块的隐藏： v-if（直接不渲染dom元素）、v-show（通过css的display:none来隐藏）、
渲染循环列表: v-for
事件绑定: v-on（事件绑定与methods有关）
属性绑定： v-bind
vue.js组件属性
new vue({
  	data:{
    		a: 1,
    		isShow: true,
    		items: {
      			{label："apple"},
      			{abel: "pen"}
    		}
 	},
  	methods:{
    		doA: function () {
      			this.a++
    		}
  	},
  	watch:{
    		"a": function (val,oldVal) {
      			console.log(val,oldVal)
    		}
  	}
})

模板指令
1.数据渲染
  <p v-text="a"></p>
  <p v-html="a"></p> // 结构一并
  <p>{{a}}</p>
2.控制显示
  <p v-if="isShow"></p>
  <p v-show="isShow"></p> // display:none
  <div id="app-3">
  	<p v-if="seen">现在你看到我了</p>
  </div>
 var app3 = new Vue({
  	el: ‘#app-3‘,
  	data: {
    		seen: true
 	 }
})
3.绑定事件
<button v-on:click="doA"></button>
<button @click="doA"></button>
<div id="app-5">
  	<p>{{ message }}</p>
  	<button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  	el: ‘#app-5‘,
  	data: {
    		message: ‘Hello Vue.js!‘
 	 },
 	methods: {
   		reverseMessage: function () {
      			this.message = this.message.split(‘‘).reverse().join(‘‘)
    		}
 	}
})
4.循环渲染
 <ul>
    	<li v-for="item in items">
      		<p v-text="item.label"></p>
   	</li>
</ul>
<div id="app-4">
  	<ol>
    		<li v-for="todo in todos">
      			{{ todo.text }}
    		</li>
  	</ol>
</div>
var app4 = new Vue({
 	 el: ‘#app-4‘,
 	 data: {
    		todos: [
     			 { text: ‘学习 javascript‘ },
      			 { text: ‘学习 Vue‘ },
     			 { text: ‘整个牛项目‘ }
    		]
  	}
})
5.循环渲染
Vue 还提供了 v-model 指令，使表单输入和应用状态间的双向绑定变得轻而易举
<div id="app-6">
  	<p>{{ message }}</p>
  	<input v-model="message">
</div>
var app6 = new Vue({
  	el: ‘#app-6‘,
  	data: {
    		message: ‘Hello Vue!‘
 	 }
})
6.属性绑定
<img v-bind:src="imageSrc"> // 字符串
<div :class="{red: isRed}"></div> // 布尔值
<div :class="[classA, classB]"></div> // 字符串
<div :class="[classA, {classB: isClassB, classC: isClassC}]"></div>
7.储存
watch 监视模式里面有个独特的方法handler
注意要加上deep： true。不然不会读取修改的值

当值发生改变被watch监视到触发了事件
开始执行handler 把修改的值items放到封装好的函数save存储到浏览器本地存储
在data数据里面把items 默认读取浏览器的本地存储，fetch有做处理，如果没有值默认是一个空数组

1.本地存储数据的代码放置在：store.js
2.js原生存储方法：window.localStorage.setItem() , window.localStorage.getItem()

1.实时同步存储数据，使用vue.$watch观察数据的变化，从而来存储数据
2.这里deep为true,items中某一个item的键值对改变也会触发handler(),从而保存各个item的状态

数据持久化，cookie https://github.com/pinguinjkeke/vue-local-storage
store.js
const STORAGE_KEY = ‘todos-vuejs‘
export default {
  	fetch () {
    		return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || ‘[]‘)
  	},
  	save (items){
    		window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
  	}
}

watch: {
    	items: {
      		handler: function (val, oldVal) { 
      		},
     		 deep: true //深度存储
    	}
  }

app.vue
<template>
  	<div id="app">
    	<img src="./assets/logo.png">
    	<h1 v-html="title"></h1>
    	<input v-model="newItem" @keyup.enter="onEnter"/>
    	<ul>
      		<li v-on:click="fn(item)" v-for="item in items" v-bind:class="{finished : item.isFinished}">{{ item.label }} - {{ item.isFinished }}</li>
    	</ul>
  	</div>
</template>

<script>
import Store from ‘./store.js‘;
export default {
  	data () {
    		return {
      			title : ‘this is a vue!<span>?</span>‘,
     			items: Store.fetch(),
      			newItem: ‘‘
    		}
  	},
  	watch: {
   		 items: {
      			handler: function (item) { 
        			Store.save(item);
      			},
      			deep: true
   	 	}
 	},
  	methods: {
    		fn: function(item){
      			item.isFinished = !item.isFinished
    		},
    		onEnter: function(){
      			this.items.push({
        			label: this.newItem,
        			isFinished: false
      			});
      			this.newItem = "";
   		 }
  	}
}
</script>

<style>
#app {
  	font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;
  	-webkit-font-smoothing: antialiased;
  	-moz-osx-font-smoothing: grayscale;
  	text-align: center;
  	color: #2c3e50;
  	margin-top: 60px;
}
.finished{
  	color: red;
}
</style>

组件：
1.子组件获取父组件
App.vue:
<template>
  	<div id="app">
    		<Component msg="hello!"></Component>
  	</div>
</template>
<script>
import Store from ‘./store.js‘;
import Component from ‘./components/component.vue‘;
export default {
  	data () {
    		return {
      			title : ‘this is a vue!<span>?</span>‘,
    		}
  	},
  	components: { Component }
}
</script>

component.vue:
<template>
  	<div>
    		<h1>{{ title }}</h1>
    		<p>{{ msg }}</p>
    		<button v-on:click="onClickme">Click!</button>
  	</div>
</template>

<script>
export default {
  	data () {
   		 return {
      			title : ‘this is a vue!‘
    		}
  	},
  	props: [‘msg‘],//获取父元素定义的值，注意引号
  	methods: {
    		onClickme: function(){
      			console.log(this.msg)//打印出获取的值
    		}
  	}
}
</script>


2.父组件获取子组件
App.vue
<template>
  	<div id="app">
    		<p>{{ childWorlds }}</p>
    		<Component msgfromfather="hello!" v-on:child-tell=‘listenTo‘></Component>
 	 </div>
</template>

<script>
import Component from ‘./components/component.vue‘
export default {
  	data () {
    		return {
      			childWorlds: ‘‘
    		}
  	},
  	components: { Component },
  	methods: {
    		listenTo: function(msg){
      			console.log(msg);
      			this.childWorlds = msg;
    		}
  	}
}
</script>

conponent.vue
<template>
  	<div>
    		<h1>{{ title }}</h1>
    		<p>{{ msgfromfather }}</p>
    		<button v-on:click="clickMe">child-tell!</button>
  	</div>
</template>

<script>
export default {
  	data () {
    		return {
      			title : ‘this is a vue!‘,
      			msg: ‘123‘
    		}
  	},
  	props: [‘msgfromfather‘],
  	methods: {
    		clickMe: function(){
      			console.log(this.msgfromfather);
      			this.$emit(‘child-tell‘,this.msg);
    		}
  	}
}
</script>