-
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的三个方面data中保存的数据，method用于和html进行交互的方法，watch针对于数据改变时候的方法（数据改变时候调用）
指令
v-text、v-html、{{}}：数据渲染（v-text格式化处理了，v-html保留了html）
v-if、v-show：模板显示和隐藏（）
v-for：循环渲染（v-for='item in items'）
v-on：事件的绑定（v-on:click="doSomething"----->@click="doSomething"）
v-bind：属性绑定（针对class的例子
:class="{red : isRed}":中red是class的名字isRed是对有没有这个class的判断
:class="[classA,classB]":再data中是一个字符串相当一这个元素有两个class
:class="[classA,{classB:isB,classC:isC}]":这里和上是一个道理
）
查看全部 -
window系统下安装nodejs
1、nodejs的官网：https://nodejs.org/en/
并且nodejs的版本需要>v6.0版本
2、git bash 的安装和下载
3、安装成功之后，配置好环境变量
4、使用淘宝的镜像，npm国内的比较慢
4、然后就是使用
# 全局安装 vue-cli
$ npm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm run dev_蛰伏对不起盗用一下
查看全部 -
vue基础内容
查看全部 -
new Vue({});对象
查看全部 -
npm install 安装node_modules文件，创建依赖
npm run dev 重启项目
查看全部 -
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 (对象的数据)
Vue { Methods (Vue对象的方法)
{ Watch (设置了对象监听的方法)
查看全部 -
vue基础小结
查看全部 -
父组件往子组件里传值方式和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))
}
}
导出localstorage方法供其他地方使用
查看全部 -
666 非常好啊
查看全部
举报