-
App.vue添加
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<div class="demo" v-text="title"></div>
<input v-model="newItem" v-on:keyup.enter="addNew" />
<ul>
<li v-for="item in items" :class="{finished:item.isFinished}" v-on:click="change(item)">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
import Store from "./store"
export default {
data: function() {
return {
title: "this is my first vue-project.",
items: Store.fetch(),
newItem: ""
}
},
methods: {
change: function(item) {
item.isFinished = !item.isFinished
},
addNew: function() {
console.log(this.newItem)
this.items.push({
label: this.newItem,
isFinished: true
}),
this.newItem = ""
Store.save()
}
},
watch: {
items: {
handler: function(items){
Store.save(items)
},
deep: true
}
}
}
</script>
<style>
.finished {
text-decoration: underline;
}
#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;
}
.demo {
color: red;
}
</style>
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))
}
}
查看全部 -
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
<div class="demo" v-text="title"></div>
<input v-model="newItem" v-on:keyup.enter="addNew" />
<ul>
<li v-for="item in items" :class="{finished:item.isFinished}" v-on:click="change(item)">
{{item.label}}
</li>
</ul>
</div>
</template>
<script>
export default {
data: function() {
return {
title: "this is my first vue-project.",
items: [],
newItem: ""
}
},
methods: {
change: function(item) {
item.isFinished = !item.isFinished
},
addNew: function() {
console.log(this.newItem)
this.items.push({
label: this.newItem,
isFinished: true
}),
this.newItem = ""
}
}
}
</script>
<style>
.finished {
text-decoration: underline;
}
#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;
}
.demo {
color: red;
}
</style>
（修改后代碼）
查看全部 -
vue的三個(gè)方面data中保存的數(shù)據(jù)，method用于和html進(jìn)行交互的方法，watch針對(duì)于數(shù)據(jù)改變時(shí)候的方法（數(shù)據(jù)改變時(shí)候調(diào)用）
指令
v-text、v-html、{{}}：數(shù)據(jù)渲染（v-text格式化處理了，v-html保留了html）
v-if、v-show：模板顯示和隱藏（）
v-for：循環(huán)渲染（v-for='item in items'）
v-on：事件的綁定（v-on:click="doSomething"----->@click="doSomething"）
v-bind：屬性綁定（針對(duì)class的例子
:class="{red : isRed}":中red是class的名字isRed是對(duì)有沒有這個(gè)class的判斷
:class="[classA,classB]":再data中是一個(gè)字符串相當(dāng)一這個(gè)元素有兩個(gè)class
:class="[classA,{classB:isB,classC:isC}]":這里和上是一個(gè)道理
）
查看全部 -
window系統(tǒng)下安裝nodejs
1、nodejs的官網(wǎng)：https://nodejs.org/en/
并且nodejs的版本需要>v6.0版本
2、git bash 的安裝和下載
3、安裝成功之后，配置好環(huán)境變量
4、使用淘寶的鏡像，npm國(guó)內(nèi)的比較慢
4、然后就是使用
# 全局安裝 vue-cli
$ npm install --global vue-cli
# 創(chuàng)建一個(gè)基于 webpack 模板的新項(xiàng)目
$ vue init webpack my-project
# 安裝依賴，走你
$ cd my-project
$ npm run dev_蟄伏對(duì)不起盜用一下
查看全部 -
vue基礎(chǔ)內(nèi)容
查看全部 -
new Vue({});對(duì)象
查看全部 -
npm install 安裝node_modules文件，創(chuàng)建依賴
npm run dev? 重啟項(xiàng)目
查看全部 -
npm.taobao.org? ?淘寶npm鏡像
查看全部 -
index.html main.jsapp.vue
查看全部 -
var?demo?=new?Vue({ ????el:'demo', ????data:{ ????????massage:'hello?vue!' ????} }) <div?id="demo"> ????<p>{{massage}}</p> ????<input?v-model="massage"> </div>查看全部 -
? ? ? ? ?{ Data ? ? ? ? ? ?(對(duì)象的數(shù)據(jù))
Vue? ?{ Methods (Vue對(duì)象的方法)
? ? ? ? ?{ Watch (設(shè)置了對(duì)象監(jiān)聽的方法)
查看全部 -
vue基礎(chǔ)小結(jié)
查看全部 -
父組件往子組件里傳值方式和react的相似<header msg=‘something’></header>子組件利用props取值
查看全部 -
const STORAGE_KEY = 'todos-vuejs';
export default{ ? ?fetch:function(){
return ?JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]')
},
save:function(items){
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items))
}
}
導(dǎo)出localstorage方法供其他地方使用
查看全部 -
666 非常好啊
查看全部
舉報(bào)