您的位置：首页 > 产品设计 > UI/UE

vue.js入门基础--慕课网笔记

2018-02-04 01:24 736 查看

vue.js入门基础

第1章 vuejs及相关工具介绍

1-1 vuejs课程简介及框架简介

课程简介

初步了解vuejs框架

介绍Vuejs开发环境的搭建和脚手架工具的使用

vuejs具体的指令和项目实践

准备知识

前端开发基础 html、css、js

前端模块化基础

对ES6有初步了解

10秒钟看懂Vue.js

<div id="demo">
<p>{{message}}</p>
<input v-model="message">
</div>

var demo = new Vue({
el: '#demo',
data: {
message: 'Hello Vue.js'
}
})

Vue.js的一个组件

*.vue = (HTML) +

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>todoList</title>
<style>
#app{
margin: 0 auto;
width: 400px;
}
#add-input{
width: 350px;
height: 30px;
}
li{
list-style:
4000
none
}
p{
display: inline
}
.finished{
text-decoration:line-through;
}
.item-status{
background-color: red;
color: #fff;
font-size: 12px;
padding: 0 5px;
}
.item-delete{
text-decoration:underline;
color: gray;
font-size: 12px;
cursor: pointer;
}
</style>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h1>{{title}}</h1>
<input id="add-input" v-model="newItem" @keyup.enter="addNew">
<ul>
<li v-for="(item,index) in items">
<h3 @mouseenter="itemEnter(item)" @mouseleave="itemLeave(item)">
<input type="checkbox" @click="toggleFinish(item)" v-model="item.isFinished">
<p class="item-label" :class="{finished:item.isFinished}">{{ index + 1 }}.{{item.label}}</p>
<p class="item-status" v-if="item.isFinished">finished</p>
<p class="item-delete" v-if="item.showDelete" @click="deleteItem(item)">Delete</p>
</h3>
</li>
</ul>
</div>
<script>
var STORAGE_KEY = "todos_vuejs"; //放在最前面，因为要拿到赋值"todos_vuejs"
new Vue({
el: '#app',
data:{
title:"This is a todoList",
items: fetch(),
newItem:''
},
watch:{
items:{
handler:function(items){
save(items);
},
deep: true
}
},
methods:{
toggleFinish:function (item) {
item.isFinished = !item.isFinished;
item.showDelete = true;
},
addNew:function(){
this.items.push({
label:this.newItem,
isFinished: false,
showDelete: false
})
this.newItem='';
},
itemEnter: function (item) {
item.showDelete = true
},
itemLeave:function(item){
item.showDelete = false
},
deleteItem:function(item){
var index = this.items.indexOf(item);
this.items.splice(index, 1)
}
}
})
function fetch() {
return JSON.parse(window.localStorage.getItem(STORAGE_KEY) || '[]');
};
function save(items) {
window.localStorage.setItem(STORAGE_KEY,JSON.stringify(items));
}
</script>
</body>
</html>

1-2 vuejs开发环境搭建及热更新

NPM

在用Vue.js构建大型应用时推荐使用NPM安装，NPM能很好地和诸如Webpack或

Browerify的CommonJS模块打包器配合使用。Vue.js也提供配套工具来开发单文件组件。

# 最新稳定版本
$ npm install vue
# 最新稳定 CSP 兼容版本
$ npm install vue@csp

命令行工具

Vue.js提供一个官方命令行工具，可用于快速搭建大型单元应用。该工具提供开箱即用的

构建工具配置，带来了现代化的前端开发流程。只需要一分钟即可启动带热重载、保存时

静态检查以及可用于生产环境的构建配置的项目。

# 全局安装 vue-cli
$ npm install -g vue-cli
# 创建一个基于“webpack”模板的新项目
$ vue init webpack my-project
# 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

1-3 从.vue到页面

从*.vue到页面

.vue –> webpack –> .html + .js + .css

一个最简单的实例

<div id="app">
{{message}}
</div>

new Vue({
el: '#app',
data: {
message: 'Hello Vue.js'
}
})

1-4 vue.js组件的重要选项

new一个vue对象的时候你可以设置它的属性，其中重要的包括三个，分别是data，methods，watch。

其中data代表vue对象的数据，methods代表vue对象的方法，watch设置了对象的监听方法。

Vue对象里的设置通过html指令进行关联。

重要的指令包括

v-text渲染数据

v-if控制显示

v-on绑定事件

v-for循环渲染

等

1-5 vuejs-学习基础框架代码

第2章 todolist项目学习

2-1 使用vuejs做一个todolist1

2-2 使用vuejs做一个todolist2

2-3 使用localstorage来存储todolist

2-4 如何划分组件

如何划分组件

功能模块 - select，pagenation…

页面区域 - header，footer，sidebar…

Vuejs组件之间的调用 - 另外一个重要选项 - components

import Header from './header'
import Footer from './footer'
new Vue({
data: {
isShow: true
},
components: {
Header, Footer
}
})

Vuejs组件之间的通信 - props

<!-- this is app.vue -->
<header msg='something interesting'></header>
<footer></footer>

// this is header.vue
new Vue({
data: {
username: 'xxx'
},
props: ['msg'],
methods: {
doThis: function () {
console.log(this.msg)
}
}
})

2-5 vuejs 组件1（父向子组件传参）

2-6 vuejs 组件2（子向父组件传参）

《vue.js入门基础视频地址》

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vuejs

相关文章推荐

新的分享

章节导航