Vue-学习笔记

基础

起步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <p>{{ message }}</p>
    </div>
<script>
    new Vue({
    el: '#app',
    data: {
        message: 'Hello Vue.js!'
    }
    })
</script>
</body>
</html>

模板语法

就是在页面上输出数据

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

v-html

使用 v-html 指令用于输出 html 代码：

<div id="app">
    <div v-html="message"></div>
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: '<h1>菜鸟教程</h1>'
  }
})
</script>

v-if

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
    <div v-if="type === 'A'">
        A
    </div>
    <div v-else-if="type === 'B'">
        B
    </div>
    <div v-else-if="type === 'C'">
        C
    </div>
    <div v-else>
        Not A/B/C
    </div>
<!--    v-show -->
    <p v-show="is_show >= 10">v-show</p>
</div>

<script>
    new Vue({
        el: '#app',
        data: {
            type: 'C',
            is_show:10
        }
    })
</script>
</body>
</html>

v-if v-show 的区别：

循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

渲染数组

v-for 可以绑定数据到数组来渲染一个列表：

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

模板中使用v-for

<ul>
  <template v-for="site in sites">
    <li>{{ site.name }}</li>
    <li>--------------</li>
  </template>
</ul>

v-for 迭代对象

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

第二个的参数为键名

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

第三个参数为索引

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

循环整数

v-for 也可以循环整数

<div id="app">
  <ul>
    <li v-for="n in 10">
     {{ n }}
    </li>
  </ul>
</div>

事件

onchange == @change
onclick == @click
onmouseover == @mouseover
onmouseout == @mouseout

v-on

事件监听可以使用 v-on 指令：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

@ == v-on 缩写形式

<button @click="greet">Greet</button>

事件修饰符

        <!-- 阻止a链接跳转 -->
        <a href="http://www.baidu.com" @click.prevent="aa()">点击</a>

组件

使用步骤

在App根组件内使用子组件；先导入再注册Header组件、最后以标签形式使用即可

Header

<template>
    <div id="Header">
        <p>{{ username }}</p>
        <button @click="changeName()">修改测试</button>
    </div>
</template>
<script>
export default {
    // data 必须是个函数 数据在return内
    data() { 
        return {
            username:"我是Header组件"
        }
    },
    methods: { 
        changeName() { 
            this.username = "测试修改方法"
        }
    }
}
</script>

<style scoped>

    #Header{
        background-color: red;
    }
    p {
        color: red;
    }
</style>

props

给组件自定义属性灵活封装组件
给Demo组件封装属性init

<script>
export default {
    //以数组形式使用props
    // props:['init'], 
    //  属性都是只读的 要想改变属性值 可以再次赋值给data内的属性 再次修改
    props: {
        init: {
            default: 0,  // 默认值
            type: Number, // 设置值类型
            required: true // 设置是否传值 
        }
    },
    data() {
        return {
            count: this.init
        }
    }

}
</script>

在App组件内使用并给init传值 count是app的属性

<Demo :init="count"/>

传值

父传子

子组件定义props属性

<template>
  <p>{{name}}=== {{age}}</p>
</template>

<script>
export default {
    props:['name','age'],
    data() { 
        return {

        }
    }

}
</script>

<style scoped>

</style>

父组件传值过去

<Demo2 :name="demo2Name" :age="demo2Age"/>

子传父

使用$emit提供个事件给父组件用调用emit的时候就会传给父组件

子组件 count+=1的时候父组件也会同时接收的count的值

    methods: {
        changeCount() { 
            this.count += 1
            // 调用的时候 就会传过去 getCount是提供给父组件的事件 就是用这个获取传的值的
            this.$emit('getConut',this.count)

        }
    }

父组件接收

    <Demo2 :name="demo2Name" :age="demo2Age" @getConut="getC"/>
    <p>获取子组件传的count：{{getNewCount}}</p>

  methods: {
    // val就是子组件传过来过来的数据
    getC(val) { 
      this.getNewCount = val
    }
  },

兄弟组件传值

通过eventBus.js模块传值

子组件Demo

<button @click="sendStr">点击发送数据给Demo2子组件</button>

子组件Demo2

ref

ref可以给元素或者一个组件实例绑定个名字来进行操作DOM

给元素绑定ref

 <p ref="bt1" @click="update">点击修改自己的颜色</p>

    update() { 
      this.$refs.bt1.style.color = 'red'
    }

给组件绑定ref 在App组件内修改子组件Demo的元素颜色

<Demo :init="count" ref="demoRef"/>
<p @click="updateDemoColor">点击修改demoRef的颜色</p>

    updateDemoColor() { 
      this.$refs.demoRef.$refs.updateColor.style.color = 'red'
    }

posted @ 2019-07-31 09:53 GJH- 阅读(57) 评论(0) 收藏举报

刷新页面返回顶部