vue.js入门基础--慕课网笔记
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) +
<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>todoListtitle>
<style>
#app{
margin: 0 auto;
width: 400px;
}
#add-input{
width: 350px;
height: 30px;
}
li{
list-style: 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">finishedp>
<p class="item-delete" v-if="item.showDelete" @click="deleteItem(item)">Deletep>
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 dev1-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
<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入门基础视频地址》