安装淘宝镜像 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>
