Day_01 Vue基础

文章目录

      • 1-Vue指令介绍(掌握)
      • 2-Vue文本操作(掌握)
      • 3-Vue的事件处理(掌握)
      • 4-Vue事件修饰符(掌握)
      • 5-Vue双向绑定(掌握)

1-Vue指令介绍(掌握)

  • 概述
    • 是带有 v- 前缀的特殊属性,不同指令具有不同含义。例如 v-html,v-if,v-for。
    • 使用指令时,通常编写在标签的属性上,值可以使用 JS 的表达式。
  • 常用指令
    • Day_01 Vue基础_第1张图片

2-Vue文本操作(掌握)

  • 概述

    • 使用v-html、v-text指令,将Vue变量插入到标签内容中。
  • 代码实现

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>19-Vue文本操作title>
    head>
    <body>
    <div id="app">
    
        <span v-html="msg1">span><br>
        <span v-text="msg2">span><br>
        <span>{{msg3}}span>
    
    div>
    
    body>
    <script src="/day01/js/vue.js">script>
    <script>
    
        var vue = new Vue({
            el:"#app",
            data:{
                msg1:"hello1",
                msg2:"hello2",
                msg3:"hello3"
            },
            methods:{
    
            }
        })
    
    script>
    html>
    
  • 注意事项

    • {{插值表达式}}会有插值闪烁问题。

3-Vue的事件处理(掌握)

  • 概述

    • 可以用"v-on:事件名"指令监听DOM事件,并在触发时运行函数;也可简写成 “@事件名”
  • 代码实现

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>20-Vue的事件处理title>
    head>
    <body>
    <div id="app">
    
        <button onclick="fn1()">点我呀1~~~button>
        <button v-on:click="fn2()">点我呀2~~~button>
        <button @click="num++">点我呀3~~~button><br>
    
        {{num}}
    
    div>
    
    body>
    <script src="js/vue.js">script>
    <script>
    
        var vue = new Vue({
            el: "#app",
            data: {
                num: 1
            },
            methods: {
                fn2() {
                    console.log("点我呀2~~~");
                    this.num++;
                },
                fn3() {
                    console.log("点我呀3~~~");
    
                }
            }
        });
    
        function fn1() {
            console.log("点我呀1~~~");
            vue.num++;
        }
    
    script>
    html>
    

4-Vue事件修饰符(掌握)

  • 概述

    • .stop :阻止事件冒泡
    • .prevent :阻止默认事件发生
  • ①阻止事件冒泡

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>20-Vue的事件修饰符title>
    head>
    <body>
    <div id="app">
    
        <div @click="fn1()">
    
            <button @click.stop="fn2()">按钮button>
    
        div>
    
    div>
    
    body>
    <script src="js/vue.js">script>
    <script>
    
        var vue = new Vue({
            el: "#app",
            data: {},
            methods: {
    
                fn1(){
                    console.log("div被点了~~~");
                },
    
                fn2(){
                    console.log("button被点了~~~");
                }
    
            }
        })
    
    script>
    html>
    
  • ②阻止默认事件发生

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>21-Vue事件修饰符title>
    
        
    head>
    <body>
    
    <div id="app">
    
        <a href="index.html" @click.prevent="fn1()">跳转到index.htmla>
    
    div>
    
    body>
    <script src="js/vue.js">script>
    
    <script>
    
        var vue = new Vue({
            el: "#app",
            data: {},
            methods: {
                fn1(){//跳转到百度
                    location.href = "http://www.baidu.com"
                }
            }
        })
    
    script>
    html>
    

5-Vue双向绑定(掌握)

  • 概述

    • 之前的插值表达式、v-text、v-html可以看做是单向绑定,Vue实例中的变量影响了视图渲染,但是反 过来就不行!
    • 可以将Vue中定义的变量的值显示到页面上,同时也可以将页面上的值绑定到Vue的变量上
    • 既然是双向绑定,一定是在视图中可以修改数据,这样就限定了视图的元素类型,目前v-model的可 使用元素有: input、select、textarea、checkbox、radio、components(Vue中的自定义组件)
  • 需求1 : 将输入框中的值动态显示到div标签中

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>22-Vue双向绑定title>
        
    head>
    <body>
    
    <div id="app">
    
        软件技术班有{{num}}个学生~~~<br>
    
        请您输入新的人数 : <input type="text" v-model="num">
    div>
    
    body>
    <script src="js/vue.js">script>
    <script>
    
        var vue = new Vue({
            el: "#app",
            data: {
                num: 200
            },
            methods: {}
        })
    
    script>
    html>
    
  • 需求2 : 将选中的多选框中的值,动态显示到span中

    
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>22-Vue双向绑定title>
        
    head>
    <body>
    <div id="app">
    
        爱好1:<input type="checkbox" value="javase" v-model="hobbys"><br>
        爱好2:<input type="checkbox" value="javame" v-model="hobbys"><br>
        爱好3:<input type="checkbox" value="javaee" v-model="hobbys"><br>
    
        已选中的爱好:
        <span>{{hobbys}}span>
    
    div>
    
    body>
    <script src="js/vue.js">script>
    <script>
    
        var vue = new Vue({
            el: "#app",
            data: {
                hobbys:[
                    "javase",
                    "javaee"
                ]
    
            },
            methods: {
    
            }
        })
    
    script>
    html>
    

你可能感兴趣的:(java,数据库,mysql)