分析一下简单安装后文件里面都有啥:
node_modules:下载好的依赖项
src:开发时候用的资源
index.html:入口文件
package.json:管理项目的各种模块及版本名称作者等信息
asset:静态文件的根目录
webpackconfig.js可以把我们写的.vue文件编译成浏览器能看得懂的文件。
.vue文件就是一个组件
包含了html标签
<div id="app"></div>
所有的内容都要包含到一个根节点下
包含了scss
<style></style>
用来修饰样式的
包含了js
<script>
export default { name: 'app',
data () {//业务逻辑里面定义的数据
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
一、和属性相绑定
v-bind:src="url"和:src="url"是一样的
二、绑定html输出必须要有标签承载
<div v-html="h"><div>
h:"</h1>我是谁?</h1>"
三、绑定text输出必须要有标签承载
<div v-text="h"><div>
h:"我是谁?"
四、@click="ok()"和v-on:click="ok()"作用是一样的
五、循环和判断的写法是这样的
<li v-for="(item,key) in list"></li>
<li v-if="!item.checked"></li>
六、导入组件的方法
import storage from "./model/storage";
七、组件中的写法,这也是数据持久化
var storage={
set(key,value){
localStorage.setItem(key, JSON.stringify(value));
},
get(key){
return JSON.parse(localStorage.getItem(key));
},remove(key){
localStorage.removeItem(key);
}
}
export default storage;
八、todolist的写法:
<template>
<div id="app">
<input type="text" v-model='todo' @keydown="doAdd($event)" />
<hr>
<br>
<h2>进行中</h2>
<ul>
<li v-for="(item,key) in list" v-if="!item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>
<br>
<br>
<h2>已完成</h2>
<ul>
<li v-for="(item,key) in list" v-if="item.checked">
<input type="checkbox" v-model="item.checked" @change="saveList()" /> {{item.title}} -- <button @click="removeData(key)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import storage from "./model/storage";
export default {
data () {
return {
todo:'' ,
list: []
}
},
methods:{
doAdd(e){
this.list.push({
title:this.todo,
checked:false
})
storage.set("list",this.list);
},
removeData(key){
this.list.splice(key,1)
storage.set("list",this.list);
}
, saveList(){
storage.set("list",this.list);
}
},mounted(){ /*生命周期函数 vue页面刷新就会触发的方法*/
var list=storage.get("list");
if(list){ /*注意判断*/
this.list=list;
}
}
}
</script>
九、类的使用
首先要定义类:
.red
{
color:red;
}
在模板里面要
<span v-bind:class="{red:flag}"></span>
在data的script标签内要
data{
flag:true或者false
}
十、内联样式的使用
<span v-bind:style="{background:dsa}"></span>
data:{ dsa:"green"}
十一、循环过程关联类的处理的处理方式可以写成:
<li v-for="(item,key) in list" :class="'red':key==0,'blue':key==1"></li>
十二、ref其实和$("#id")一样
<div ref="mydiv"></div>
this.$refs.mydiv.text
和
<div id="mydiv"></div>
$("#mydiv").text();
十三、生命周期函数和methods和data是同一个级别的
data:{},methods:{},mounted:{}