Vue2.0小白入门教程

作者: 銭兎孑 | 来源:发表于2018-03-16 17:30 被阅读340次

Vue 入门到实战课程
Vue2.0小白入门教程
Vue2.0实操经典文章整理
Github 小白入门教程3
C++入门篇
Vue2.0-Vue3.0语法差异性总结
opencv小白入门教程
Omnifocus小白入门教程
github小白入门教程
github常用命令

视频地址: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