vue 学习笔记
- Todolist未完代办事项
<template>
<div id="app">
<ul>
<li> 输入工作内容：<input type="text" v-model="msg"></li>
<li>正在进行的工作：</li>
<li>
<div v-for="(a,index) in list" :key="index">
<div v-if="!a.isend">
<input type="checkbox" @click="ckBox(index)" :checked="a.isend"/><span>{{a.title}}</span>
</div>
</div>
</li>
<li>已完成的工作：</li>
<li>
<div v-for="(a,index) in list" :key="index">
<div v-if="a.isend">
<input type="checkbox" @click="ckBox(index)" :checked="a.isend"/><span>{{a.title}}</span>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg:"",
list:[
{
"title":"JavaScript",
isend:false
}
]
}
},
mounted(){
this.list=JSON.parse(localStorage.getItem("list"));
//给页面添加事件
document.body.onkeydown=(e)=>{
if(e.keyCode==13)
{
this.list.push({
"title":this.msg,
isend:false
});
this.msg="";
this.saveStorage();
}
}
},
methods:{
ckBox(index){
this.list[index].isend=! this.list[index].isend;
this.saveStorage();
},
saveStorage(){
localStorage.setItem("list",JSON.stringify(this.list));
}
}
}
</script>
<style lang="scss">
</style>
- vue中的模块化以及storage组件实现保存
vue 代码：
<template>
<div id="app">
<ul>
<li> 输入工作内容：<input type="text" v-model="msg"></li>
<li>正在进行的工作：</li>
<li>
<div v-for="(a,index) in list" :key="index">
<div v-if="!a.isend">
<input type="checkbox" @click="ckBox(index)" :checked="a.isend"/><span>{{a.title}}</span>
</div>
</div>
</li>
<li>已完成的工作：</li>
<li>
<div v-for="(a,index) in list" :key="index">
<div v-if="a.isend">
<input type="checkbox" @click="ckBox(index)" :checked="a.isend"/><span>{{a.title}}</span>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
import storage from './module/storage.js'
export default {
name: 'app',
data () {
return {
msg:"",
list:[
{
"title":"JavaScript",
isend:false
}
]
}
},
mounted(){
this.list=storage.getStorage("list");
//给页面添加事件
document.body.onkeydown=(e)=>{
if(e.keyCode==13)
{
this.list.push({
"title":this.msg,
isend:false
});
this.msg="";
storage.setStorage("list",JSON.stringify(this.list));
}
}
},
methods:{
ckBox(index){
this.list[index].isend=! this.list[index].isend;
storage.setStorage("list",JSON.stringify(this.list));
}
}
}
</script>
<style lang="scss">
</style>
Storage模块化组件:
//缓存的功能（返回json数据类型）
let storage={
setStorage(key,value){
localStorage.setItem(key,value);
},
getStorage(key){
return JSON.stringify(localStorage,getItem(key));
},
clearItem(){
localStorage.clear();
},
removeItem(key){
localStorage.removeItem(key);
}
}
export default storage;
- vue 生命周期
- beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。 - created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 - beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。 - mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 - beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。 - updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。 - beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。 - destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
- beforeCreate
- 组件的声明
<template>
<div>
{{msg}}
</div>
</template>
<script>
export default {
data(){
return {
msg:"我是自定义组件"
}
}
}
</script>
<style lang="sass" scoped>
// scoped 作用于当前的组件样式
</style>
-
组件的挂在与使用
- 基本语法
<template> <div id="app" > <v-Home></v-Home> </div> </template> <script> import Home from './component/Home.vue' export default { name: 'app', components:{ //组件的挂在 'v-Home':Home }, data () { return { msg:"", } }, mounted(){ }, methods:{ } } </script> <style lang="scss" scoped> // scoped 作用域当前组件 </style>- 同步加载
<template> <div id="app"> <div> <Footernav></Footernav> </div> </div> </template> <script> import Footernav from "./Components/Footer"; export default { name: 'app', data () { return { components:{ Footernav } } } } </script> <style> </style>- 异步加载
<template> <div id="app"> <div> <footermenu></footermenu> <footernav></footernav> </div> </div> </template> <script> //方法二 import Vue from 'vue'; const footernav=Vue.component("footertitle",(resolve)=>{ setTimeout(()=>{ require(["./Components/Footer"],resolve); },1000); }); export default { name: 'app', data () { return { components:{ //方法一 footermenu(resolve) { //异步加载 //请求 require(["./Components/Footer"], resolve); }, } } } } </script> <style> </style>- 动态加载
<template> <div id="app"> <div> <component :is="addComponent"></component> </div> </div> </template> <script> export default { name: 'app', data () { return { computed: { //写动态加载组件 addComponent() { //按需加载 return Footernav; } } } } } </script> <style> </style> -
vue中父子组件传值
<template>
<div>
<h3>我是Home组件---{{title}}</h3>
</div>
</template>
<script>
/*
在这里除了可以给子组件传值 ---在组件上绑定属性 在子组件里面接受传值 props
传值 传方法 传对象
也可以在接受传值的时候 规定传值的类型
*/
export default {
// props:['title'],
props:{
'title':String
},
data(){
return {
}
}
}
</script>
-
父组件获取子组件的数据和方法
- 父组件获取子组件的方法和数据
在子组件上定义ref属性 通过 this. r e f s . n a m e . 属 性 或 者 t h i s . refs.name.属性 或者this. refs.name.属性或者this.refs.name.方法 - 子组件主动获取父组件的属性和方法
This. p a r e n t . 数 据 t h i s . parent.数据 this. parent.数据this.parent.方法
- 父组件获取子组件的方法和数据
-
vue中非父组件之间的传值
在vue中非父子组件之间传值可以使用非父之间的通信 $emit $on
import Vue from 'vue'
let vue=new Vue();
export default vue;
<template>
<div>
<h3>我是Home组件</h3>
<button @click="sendToNews()">给news传数据</button>
</div>
</template>
<script>
import VueEmit from '../Model/VueEmit.js';
export default {
data(){
return {
msg:"我是Home"
}
},
mounted(){
VueEmit.$on("to-Home",(res)=>{
console.log(res);
});
},
methods:{
sendToNews(){
VueEmit.$emit("to-News",this.msg);
}
}
}
</script>
<template>
<div>
<h3>我是news组件</h3>
<button @click="sendToHome()">给Home传数据</button>
</div>
</template>
<script>
import VueEmit from '../Model/VueEmit.js';
export default {
data(){
return {
msg:"我是News组件"
}
},
mounted(){
VueEmit.$on("to-News",(res)=>{
console.log(res);
});
},
methods:{
sendToHome(){
VueEmit.$emit("to-Home",this.msg);
}
}
}
</script>
- vue 中的路由器
vue 里面的路由器 —根据location 跳转页面
安装 cnpm install vue-router --save-dev — 安装完成之后去main.js文件进行引入+配置
1.引入 import vueRouter from ‘vue-router’
2.使用 Vue.use(vueRouter);
3.配置路由
4.关联 到vue
5.路由的入口点
6.路由的出口点
import Vue from 'vue'
import App from './App.vue'
require("./mock/Mock");
import Home from './component/Home.vue'
import News from './component/News.vue'
//配置vue-resource
import vueResource from 'vue-resource'
// 导入
import VueRouter from 'vue-router'
// 使用
Vue.use(VueRouter);
// 配置
const routes =[
{path:"/Home",component:Home},
{path:"/News",component:News}
]
//实例化
const router=new VueRouter({
routes :routes
});
//挂载
new Vue({
el: '#app',
router,
render: h => h(App)
});
//vue 代码
<template>
<div id="app">
<button @click="getajax">请求数据</button>
<router-link to="/Home">Home</router-link>
<router-link to="/News">News</router-link>
<router-view></router-view>
</div>
</template>
- 路由的传值
import Vue from 'vue';
import vueRouter from 'vue-router'
import Home from '../component/home.vue'
import News from '../component/news.vue'
import detail from '../component/newsdetail.vue'
import myinfo from '../component/my.vue'
import login from '../component/login.vue'
Vue.use(vueRouter);
//配置 path 路径 component 组件 name :名称 children（子路由）
const router = new vueRouter({
routes: [
{
path: "/",
component: Home,
// redirect:"/user" 纯对象（默认路由）
}, {
path: "/news",
component: News
},
{
path: "/user",
component: myinfo
},
{
//这里是配置动态传值
path: "/news/newsdetail/:id",
component: detail
},
{
//这里是配置get传值
path: "/news/newsdetail",
component: detail
},
{
path:"/login",
component:login
}
],
mode: "history"//修改路由路径的模式location
});
- 路由的编程式导航
//直接跳转到homd组件
this.$router.push("home");
//也可以通过路径来跳转
this.$router.push({ path: 'home' });
//也可以通过路径跳转传参
？？？？params传值传不过去this.$router.push({ name: 'user', params: { userId: '123' } });
//也可以通过路径跳转传参
this.$router.push({ path: 'register', query: { plan: 'private' } })
- 路由的嵌套
const routes =[
{path:"/Home",component:Home},
{
path:"/News",component:News,
children:[
{
path:"/list",
component:list
}
]
},
{path:"/content",component:content},
{path:"*",redirect:"/Home"}
]
在嵌套子路由时 在父路由界面显示子路由</ router-view>
- vue-resource 请求数据
Vue-resource 官方提供的组件
cnpm install vue-resource –save;
安装完成之后：
import Vue from 'vue'
import App from './App.vue'
//配置vue-resource
import vueResource from 'vue-resource'
//使用插件
Vue.use(vueResource);
new Vue({
el: '#app',
render: h => h(App)
})
- 使用vue-resource请求mock数据
<template>
<div id="app">
<button @click="getajax">请求数据</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
methods:{
getajax(){
this.$http.post('/list').then(response => {
console.log(1);
});
}
}
}
</script>
<style lang="scss">
</style>
- 使用axios 请求mock数据
axios 安装 cnpm install axios –save
<template>
<div id="app">
<button @click="getajax">请求数据</button>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
axios.post("/user").then((res)=>{
console.log(res);
});
},
methods:{
getajax(){
this.$http.post('/list').then(response => {
console.log(response);
});
}
}
}
</script>
<style lang="scss">
</style>
或者：
import Vue from 'vue'
import App from './App.vue'
//配置vue-resource
import vueResource from 'vue-resource'
import VueRouter from 'vue-router'
import axios from 'axios'
require("./mock/Mock");
Vue.prototype.$axios=axios;
//使用插件
Vue.use(vueResource,VueRouter);
new Vue({
el: '#app',
render: h => h(App)
})
<template>
<div id="app">
<button @click="getajax">请求数据</button>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
this.$axios.post("/user").then((res)=>{
console.log(res);
});
},
methods:{
getajax(){
this.$http.post('/list').then(response => {
console.log(1);
});
}
}
}
</script>
<style lang="scss">
</style>
- Fetch-jsonp 请求数据
<template>
<div id="app">
<button @click="getajax">请求数据</button>
</div>
</template>
<script>
// import axios from 'axios';
import fetchjsonp from 'fetch-jsonp';
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
},
mounted(){
// axios.post("/user").then((res)=>{
// console.log(res);
// });
fetchjsonp('http://www.phonegap100.com/appapi.php?a=getPortalList&catid=20&page=1')
.then(function(response) {
return response.json()
}).then(function(json) {
console.log('parsed json', json)
}).catch(function(ex) {
console.log('parsing failed', ex)
})
},
methods:{
getajax(){
this.$http.post('/list').then(response => {
console.log(response);
});
}
}
}
</script>
<style lang="scss">
</style>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
