视频地址:https://ke.qq.com/course/list/vue2.0%E5%B0%8F%E7%99%BD
特别感谢 : 米斯特吴
vue2.x 技术交流群 : 540911224
第一到第五节知识点
1. 使用vue 需要引入vue.js
<script type="text/javascript" src="vue.js"></script>
2. 实例化vue
new Vue({
el : "#vue-app",
data: {
name: "mister 吴",
job: "web 开发",
website: "http://www.imooc.com",
websiteTag: "<a href='http://www.imooc.com'>The new step</a>",
},
methods:{
greet: function(time){
return "Good " + time + " " + this.name + '!';
}
}
})
注:
el : element 需要获取的元素,一定是 html中的根容器元素
data : 用于数据的存储
methods : 用于存储各种方法
data-binding : 给属性绑定的响应的值
第六节知识点:
html部分
<button @click.once="add(1)">涨一岁</button>
<button v-on:click="subtract(1)">减一岁</button>
<button @dblclick="add(10)">涨十岁</button>
<button v-on:dblclick="subtract(10)">减十岁</button>
<p> My age is {{ age }}</p>
<div id="canvas" v-on:mousemove="updateXY">
{{x}} , {{y}} -
<span v-on:mousemove="stopMoving"> Stop moving</span>
<span @mousemove.stop=""> Stop moving</span>
</div>
<a v-on:click.prevent="alert()" href="http://www.imooc.com"> the new step</a>
javascript 部分
new Vue({
el : "#vue-app",
data: {
age:30,
x:0,
y:0,
},
methods:{
add: function(inc){
this.age += inc;
},
subtract: function(dec){
this.age -= dec;
},
updateXY: function(event){
//console.log(event)
this.x = event.offsetX;
this.y = event.offsetY;
},
stopMoving: function(event){
event.stopPropagation();
},
alert: function(){
alert('hello word');
},
}
});
注:
调用方法, 在双括号内 需要加小括号调用
绑定事件内 可以省略小括号 传参需要加上小括号
v-on:click 单击事件
例:
v-on:click="add"
v-on:dblclick 双击事件
例:
v-on:dblclick="add"
@click.once
让事件只生效一次 once
例:
@click.once="add(1)
v-on:click.once="add(1)
v-on:mousemove.stop 阻止冒泡事件
例:
v-on:mousemove.stop
@mousemove.stop
v-on:click.prevent 阻止默认事件
例:
v-on:click.prevent
@click.prevent
第七节知识点
html 部分
<label>姓名:</label>
<input type="text" @keyup.enter="logName">
<label>年龄:</label>
<input type="text" @keyup.alt.enter="logAge">
注 :
键盘事件
v-on:keyip="logName"
例:
@keyup.enter="logName"
v-on:keyup.enter="logName"
链式操作
例:
@keyup.alt.enter 键盘按住alt+enter生效
@keyup.enter 键盘按回车生效
javascripte 部分:
new Vue({
el : "#vue-app",
data: {
},
methods:{
logName: function(){
console.log('你正在输入你的名字!')
},
logAge: function(){
console.log('你正在输入你的年龄!')
},
}
});
第八节知识点
html 部分 :
<label>姓名:</label>
<input ref="name" type="text" @keyup="logName">
<span>{{ name }}</span>
<label>年龄:</label>
<input ref="age" type="text" @keyup="logAge">
<span>{{ age }}</span>
label>姓名:</label>
<input ref="name" type="text" v-model="name">
<span>{{ name }}</span>
<label>年龄:</label>
<input ref="age" type="text" v-model="age">
<span>{{ age }}</span>
注:
ref 标记 配合后台取值
v-model 双向绑定
javascript部分
new Vue({
el : "#vue-app",
data: {
name:"",
age:"",
},
methods:{
logName: function(){
this.name = this.$refs.name.value
//console.log(this.$refs.name.value)
},
logAge: function(){
this.age = this.$refs.age.value
},
}
});
注:
this.$refs.name.value 获取前台页面标记为name的值
第九节知识点
html部分
<button @click="a++">Add to A</button>
<button @click="b++">Add to B</button>
<p>A - {{a}}</p>
<p>B - {{b}}</p>
<p>Age + A = {{addToA}}</p>
<p>Age + B = {{addToB}}</p>
javascript 部分
new Vue({
el : "#vue-app",
data: {
a:0,
b:0,
age:20,
},
methods:{
/*
addToA:function(){
console.log('Add to A');
return this.a + this.age;
},
addToB:function(){
console.log('Add to B');
return this.b + this.age;
},
*/
},
computed:{
addToA:function(){
console.log('Add to A');
return this.a + this.age;
},
addToB:function(){
console.log('Add to B');
return this.b + this.age;
},
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十节知识点
html部分
<h2 > 实例 1 </h2>
<div @click="changeColor = !changeColor" :class="{changeColor:changeColor}">
<span>Henry</span>
</div>
<h2> 实例 2 </h2>
<button @click="changeColor = !changeColor">change color</button>
<button @click="changeLength = !changeLength">change length</button>
<div :class="compClasses">
<span>Henry</span>
</div>
注:
动态绑定class
1. 通过button来动态设置 changeColor or changeLength 的值
2. 绑定compClasses 来接受返回的class 当返回值为true时 那么class生效 否则不生效来打到动态class的目的
javascript 部分
new Vue({
el : "#vue-app",
data: {
changeColor:false,
changeLength:false,
},
methods:{
},
computed:{
compClasses: function(){
return {
changeColor:this.changeColor,
changeLength:this.changeLength
}
}
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十一节笔记
html部分
<button @click="error = !error">Toggle Error</button>
<button @click="success = !success">Toggle Success</button>
<p v-if="error">网络连接错误:404</p>
<p v-else-if="success">网络连接成功</p>
<p v-show="error">网络连接错误:404</p>
<p v-show="success">网络连接成功</p>
注:
v-if 判断标签 当条件成立时显示
例:
<p v-if="error">网络连接错误:404</p>
判断 error 为真时才会显示内容
当条件为false时 代码会被整个删除掉不会留在页面上
v-else-if 判断标签 当上一个if 不生效时 判断自己是否为真 为真生效
例:
<p v-else-if="success">网络连接成功</p>
判断success 是否为真
v-show 显示隐藏
例:
<p v-show="error">网络连接错误:404</p>
判断 如果为真时会显示 如果为假会加上display:none 隐藏
javascript 部分
new Vue({
el : "#vue-app",
data: {
error: false,
success: false,
},
methods:{
},
computed:{
}
});
注:
computed 计算属性
调用methods时会把所有的方法都执行 computed不会 只会执行当前方法
第十二节笔记
html部分
<div id="vue-app">
<h1> v-for 循环</h1>
{{ characters[0] }}
{{ characters[1] }}
{{ characters[2] }}
<ul>
<li v-for="character in characters">
{{ character }}
</li>
</ul>
<ul>
<li v-for="(user,index) in users">
{{index+1}}.{{ user.name }} - {{ user.age }}
</li>
</ul>
<template v-for="(user,index) in users">
<h3>{{index+1}}</h3>.{{ user.name }}
<p>{{ user.age }}</p>
</template>
<template v-for="(user,index) in users">
<div v-for="(val,key) in user">
<p>{{key}} - {{val}}</p>
</div>
</template>
</div>
注:
v-for 循环标签 (不仅可以遍历数组 还可以遍历对象)
例:
v-for="character in characters"
v-for="(user,index) in users"
循环标签 user 每次循环的的值保存的地方 index 下标
template 标签
使用它 可以避免渲染多个外层标签
javascript 部分
new Vue({
el : "#vue-app",
data: {
characters:['Mario',"luffy","Yoshi"],
users:[
{name:"Herny",age:30},
{name:"Bucky",age:25},
{name:"Emily",age:18},
],
},
methods:{
},
computed:{
}
});
第十三节笔记
html部分
<div id="vue-app">
<!-- 图片 -->
<div id="bag" v-bind:class="{burst:ended}"></div>
<!-- 进度情况 -->
<div id="bag-health">
<div v-bind:style="{width:health + '%'}"></div>
</div>
<!-- 控制按钮 -->
<div id="controls">
<button v-on:click="punch" v-show="!ended">使劲敲</button>
<button v-on:click="restart">重新开始</button>
</div>
</div>
javascript 部分
new Vue({
el : "#vue-app",
data: {
health:100,
ended:false,
},
methods:{
punch:function () {
this.health -=10
if(this.health <= 0){
this.ended = true;
}
},
restart:function () {
this.health = 100;
this.ended = false;
}
},
computed:{
}
});
第十四节笔记
html部分
<div id="vue-app-one">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
</div>
<div id="vue-app-two">
<h2>{{ title }}</h2>
<p>{{ greet }}</p>
<button v-on:click="changeTitle">changeTtitle</button>
</div>
javascript 部分
//实例化vue对象
var one = new Vue({
el : "#vue-app-one",
data: {
title:"app one 的内容",
},
methods:{
},
computed:{
greet: function () {
return "Hello App One";
}
}
});
var two = new Vue({
el : "#vue-app-two",
data: {
title:"app two 的内容",
},
methods:{
changeTitle:function () {
one.title = "已经改名了!";
}
},
computed:{
greet: function () {
return "Hello App Two";
}
}
});
two.title = "app two 的title 也发生变化了"
第十五节笔记
html部分
<div id="vue-app-one">
<greeting></greeting>
</div>
<div id="vue-app-two">
<greeting></greeting>
</div>
javascript 部分
Vue.component("greeting",{
template:`
<p>
{{name}} : 大家好,给大家介绍一下我的女朋友@xxx
<button v-on:click="changeName">改名</button>
</p>`,
data: function () {
return {
name:"xxx"
}
},
methods: {
changeName:function(){
this.name = "xxx"
}
}
});
new Vue({
el : "#vue-app-one",
});
new Vue({
el : "#vue-app-two",
});
注:
component 组件
第十六节笔记
Vue-cli
安装过程
Project name 项目名称
Project description 项目描述
Author 作者信息
二选一
Runtime + Compiler 默认选这个 代表的意思暂时不知道 回头记得查一下
Runtime-only
Install vue-router 猜测为路由 回头记得查一下 暂时选n 后期需要会安装
Use ESLint to lint your code 测试的组件 安装后代码需要非常严谨 暂时不装 选n
Setup unit tests with Karma + Mocha 测试的组件 暂时不装 选n
Setup e2e tests with Nightwatch 暂时选n 不知道是什么 回头记得查一下
文件夹
build 构建时 构建了客户端和服务端 可以改变端口号
config 配置文件
static 静态文件
.gitignore git忽略的文件
index.html 入口文件
package.json 依赖的文件
readme.md 指令提示
src
assets 图片存放地址
components 组件
App.vue 跟组件
main.js
代码:
Style 添加 scoped 会指定样式代码在当前域中生效
注册全局组件 在main.js中声明并引入
组件 名称和里面id名称相同 老师的习惯 感觉不错
npm install vue-route --save-dev 安装路由组件
第十七节笔记
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<h1>{{title}}</h1>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
export default {
name: 'App',
data(){
return{
title:"这是我的第一个vue脚手架项目"
}
}
}
</script>
<!-- 样式 : 解决样式-->
<style>
</style>
第十八节笔记
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / Users.vue
<template>
<div class="users">
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:'users',
data: function(){
return {
users:[
"Henry","Bucky","Emily"
]
}
}
}
</script>
<style>
</style>
app.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<h1>{{title}}</h1>
<users></users>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
export default {
name: 'App',
data:function(){
return{
title:"这是我的第一个vue脚手架项目"
}
},
components:{
// "users":Users
Users
}
}
</script>
<!-- 样式 : 解决样式-->
<style>
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第十九节笔记
components / HelloWord.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users">
{{user}}
</li>
</ul>
</div>
</template>
<script>
export default{
name:'users',
data: function(){
return {
users:[
"Henry","Bucky","Emily"
]
}
}
}
</script>
<style scoped>
h1{
color:green;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<h1>{{title}}</h1>
<users></users>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
export default {
name: 'App',
data:function(){
return{
title:"这是我的第一个vue脚手架项目"
}
},
components:{
// "users":Users
Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第二十节笔记
components / footer.vue
<template>
<footer>
<p>{{copyright}}</p>
</footer>
</template>
<script>
export default {
name:'app-footer',
data(){
return {
copyright:"Copyright 2018 vue demo"
}
}
}
</script>
<style scoped>
footer{
background: #222;
padding: 6px;
}
p{
color:lightgreen;
text-align: center;
}
</style>
components / Header.vue
<template>
<header>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
data(){
return{
title:"Vue.js Demo"
}
}
}
</script>
<style scoped>
header{
background:lightgreen;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / Users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users"
v-on:click="user.show = !user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.position}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default{
name:'users',
data: function(){
return {
users:[
{ name:"Henry1",position:"web开发1",show:false},
{ name:"Henry2",position:"web开发2",show:false},
{ name:"Henry3",position:"web开发3",show:false},
{ name:"Henry4",position:"web开发4",show:false},
{ name:"Henry5",position:"web开发5",show:false},
{ name:"Henry6",position:"web开发6",show:false},
]
}
}
}
</script>
<style scoped>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
border:1px solid #222;
margin: 10px;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<h1>{{title}}</h1>
<app-header></app-header>
<users></users>
<app-footer></app-footer>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
data:function(){
return{
title:"这是我的第一个vue脚手架项目"
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
//Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第二十一节笔记
components / Footer.vue
<template>
<footer>
<p>{{copyright}}</p>
</footer>
</template>
<script>
export default {
name:'app-footer',
data(){
return {
copyright:"Copyright 2018 vue demo"
}
}
}
</script>
<style scoped>
footer{
background: #222;
padding: 6px;
}
p{
color:lightgreen;
text-align: center;
}
</style>
components / Header.vue
<template>
<header>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
data(){
return{
title:"Vue.js Demo"
}
}
}
</script>
<style scoped>
header{
background:lightgreen;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / Users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users"
v-on:click="user.show = !user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.position}}</h3>
</li>
</ul>
</div>
</template>
<script>
export default{
name:'users',
//props:["users"], //属性传值 父传子
props:{
users:{
type:Array,
required:true,
},
},
data: function(){
return {
}
}
}
</script>
<style scoped>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
border:1px solid #222;
margin: 10px;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<h1>{{title}}</h1>
<app-header></app-header>
<users v-bind:users="users"></users>
<app-footer></app-footer>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
data:function(){
return{
users:[
{ name:"Henry1",position:"web开发1",show:false},
{ name:"Henry2",position:"web开发2",show:false},
{ name:"Henry3",position:"web开发3",show:false},
{ name:"Henry4",position:"web开发4",show:false},
{ name:"Henry5",position:"web开发5",show:false},
{ name:"Henry6",position:"web开发6",show:false},
]
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
//Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第二十二节笔记
components / footer.vue
<template>
<footer>
<p>{{copyright}}</p>
<p>{{title}}</p>
</footer>
</template>
<script>
export default {
name:'app-footer',
props:{
title:{
type:String
}
},
data(){
return {
copyright:"Copyright 2018 vue demo"
}
}
}
</script>
<style scoped>
footer{
background: #222;
padding: 6px;
}
p{
color:lightgreen;
text-align: center;
}
</style>
conmponents / Header.vue
<template>
<header v-on:click="changeTitle">
<h1>{{title1}}</h1>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
props:{
title:{
type:String
}
},
data(){
return{
title1:"Vue.js Demo"
}
},
methods:{
changeTitle:function () {
this.title = "changed";
}
}
}
</script>
<style scoped>
header{
background:lightgreen;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users"
v-on:click="user.show = !user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.position}}</h3>
</li>
</ul>
<button v-on:click="deleteUser">删除</button>
</div>
</template>
<!--
传值 : string number boolean
引用 : array object //改变一个地方的数据 所有跟数据有关联的地方都会改变
-->
<script>
export default{
name:'users',
//props:["users"], //属性传值 父传子
props:{
users:{
type:Array,
required:true,
},
},
data: function(){
return {
}
},
methods:{
deleteUser:function(){
this.users.pop();
}
}
}
</script>
<style scoped>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
border:1px solid #222;
margin: 10px;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<app-header v-bind:title="title"></app-header>
<users v-bind:users="users"></users>
<users v-bind:users="users"></users>
<app-footer v-bind:title="title"></app-footer>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
data:function(){
return{
users:[
{ name:"Henry1",position:"web开发1",show:false},
{ name:"Henry2",position:"web开发2",show:false},
{ name:"Henry3",position:"web开发3",show:false},
{ name:"Henry4",position:"web开发4",show:false},
{ name:"Henry5",position:"web开发5",show:false},
{ name:"Henry6",position:"web开发6",show:false},
],
title:"传递的事一个值,(string number boolean)"
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
//Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第二十三节笔记
components / footer.vue
<template>
<footer>
<p>{{copyright}}</p>
<p>{{title}}</p>
</footer>
</template>
<script>
export default {
name:'app-footer',
props:{
title:{
type:String
}
},
data(){
return {
copyright:"Copyright 2018 vue demo"
}
}
}
</script>
<style scoped>
footer{
background: #222;
padding: 6px;
}
p{
color:lightgreen;
text-align: center;
}
</style>
components / header.js
<template>
<header v-on:click="changeTitle">
<h1>{{title1}}</h1>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
props:{
title:{
type:String
}
},
data(){
return{
title1:"Vue.js Demo"
}
},
methods:{
changeTitle:function () {
// this.title = "changed";
this.$emit('titleChanged',"子向父组件传值"); //注册事件
}
}
}
</script>
<style scoped>
header{
background:lightgreen;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / Users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users"
v-on:click="user.show = !user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.position}}</h3>
</li>
</ul>
<button v-on:click="deleteUser">删除</button>
</div>
</template>
<!--
传值 : string number boolean
引用 : array object //改变一个地方的数据 所有跟数据有关联的地方都会改变
-->
<script>
export default{
name:'users',
//props:["users"], //属性传值 父传子
props:{
users:{
type:Array,
required:true,
},
},
data: function(){
return {
}
},
methods:{
deleteUser:function(){
this.users.pop();
}
}
}
</script>
<style scoped>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
border:1px solid #222;
margin: 10px;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<app-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></app-header>
<users v-bind:users="users"></users>
<users v-bind:users="users"></users>
<app-footer v-bind:title="title"></app-footer>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
data:function(){
return{
users:[
{ name:"Henry1",position:"web开发1",show:false},
{ name:"Henry2",position:"web开发2",show:false},
{ name:"Henry3",position:"web开发3",show:false},
{ name:"Henry4",position:"web开发4",show:false},
{ name:"Henry5",position:"web开发5",show:false},
{ name:"Henry6",position:"web开发6",show:false},
],
title:"传递的事一个值,(string number boolean)"
}
},
methods: {
updateTitle(title){
this.title = title;
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
//Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
第二十四节笔记
components / footer.vue
<template>
<footer>
<p>{{copyright}}</p>
<p>{{title}}</p>
</footer>
</template>
<script>
export default {
name:'app-footer',
props:{
title:{
type:String
}
},
data(){
return {
copyright:"Copyright 2018 vue demo"
}
}
}
</script>
<style scoped>
footer{
background: #222;
padding: 6px;
}
p{
color:lightgreen;
text-align: center;
}
</style>
components / Header.vue
<template>
<header v-on:click="changeTitle">
<h1>{{title1}}</h1>
<h1>{{title}}</h1>
</header>
</template>
<script>
export default{
name:'app-header',
props:{
title:{
type:String
}
},
data(){
return{
title1:"Vue.js Demo"
}
},
methods:{
changeTitle:function () {
// this.title = "changed";
this.$emit('titleChanged',"子向父组件传值"); //注册事件
}
},
beforeCreate:function(){
alert("组件实例化之前执行的函数");
},
created:function(){
alert('组件实例化完毕,页面还未显示');
},
beforeMount:function() {
alert('组件挂载前,页面扔未展示,但是虚拟dom已经配置');
},
mounted:function(){
alert('组件挂载后,此方法执行后页面显示');
},
beforeUpdate:function(){
alert('组件更新前,页面仍未更新,但虚拟dom已经配置');
},
updated:function () {
alert('组件更新,此方法执行后页面显示');
},
beforeDestroy:function () {
alert('组件销毁前');
},
destroyed:function () {
alert('组件销毁');
}
}
</script>
<style scoped>
header{
background:lightgreen;
padding: 10px;
}
h1{
color: #222;
text-align: center;
}
</style>
components / HelloWorld.vue
<template>
<div class="hello">
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
}
}
}
</script>
components / Users.vue
<template>
<div class="users">
<h1>Hello Users</h1>
<ul>
<li v-for="user in users"
v-on:click="user.show = !user.show">
<h2>{{user.name}}</h2>
<h3 v-show="user.show">{{user.position}}</h3>
</li>
</ul>
<button v-on:click="deleteUser">删除</button>
</div>
</template>
<!--
传值 : string number boolean
引用 : array object //改变一个地方的数据 所有跟数据有关联的地方都会改变
-->
<script>
export default{
name:'users',
//props:["users"], //属性传值 父传子
props:{
users:{
type:Array,
required:true,
},
},
data: function(){
return {
}
},
methods:{
deleteUser:function(){
this.users.pop();
}
}
}
</script>
<style scoped>
.users{
width: 100%;
max-width: 1200px;
margin: 40px auto;
padding: 0 20px;
box-sizing: border-box;
}
ul {
display: flex;
flex-wrap: wrap;
list-style-type: none;
padding: 0;
}
li{
flex-grow: 1;
flex-basis: 200px;
text-align: center;
padding: 30px;
border:1px solid #222;
margin: 10px;
}
</style>
App.vue
<!--模板 : html结构-->
<template> <!-- 有且只有一个跟标签 -->
<div id="app">
<app-header v-on:titleChanged="updateTitle($event)" v-bind:title="title"></app-header>
<users v-bind:users="users"></users>
<users v-bind:users="users"></users>
<app-footer v-bind:title="title"></app-footer>
</div>
</template>
<!-- 行为 : 处理逻辑-->
<script>
//局部注册组件
import Users from './components/Users';
import Header from './components/Header';
import Footer from './components/Footer';
export default {
name: 'App',
data:function(){
return{
users:[
{ name:"Henry1",position:"web开发1",show:false},
{ name:"Henry2",position:"web开发2",show:false},
{ name:"Henry3",position:"web开发3",show:false},
{ name:"Henry4",position:"web开发4",show:false},
{ name:"Henry5",position:"web开发5",show:false},
{ name:"Henry6",position:"web开发6",show:false},
],
title:"传递的事一个值,(string number boolean)"
}
},
methods: {
updateTitle(title){
this.title = title;
}
},
components:{
"users":Users,
"app-header":Header,
"app-footer":Footer
//Users
}
}
</script>
<!-- 样式 : 解决样式-->
<!-- scoped 域 添加后互不干扰 -->
<style scoped>
h1{
color:purple;
}
</style>
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
//import Users from "./components/Users"
Vue.config.productionTip = false
//全局注册组件
//Vue.component("users",Users)
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App }, //注册插件 App 是引入的 在上方
template: '<App/>' //模板
})
//index.html -> main.js ->App.vue
完结,撒花.
如果您能看到这里,我在此表示深深的感谢,以及真挚的祝福. --来自一个vue的初学者 cdd
网友评论