1.Vue基础(@事件名+v-show+created+v-bind)

Vue基础

一.Vue简介

1.定义：

javaScript渐进式框架，方便操作页面的数据，显示数据

2.特点：

• 响应式编程，页面的数据和js的数据是互相绑定的，当其中一个值发生变化，对应的值也会变化
• 组件化，可以把页面元素功能封装起来(java的方法)

3.建立vue程序步骤

1. 引入vue.js文件

    <!-- 引入js文件 -->
   <!--
   第一步：引入vue.js文件
   第二步：在body中定义div容器，并且绑定id
   作用
   （展示数据）
   第三步：定义vue对象作用(定义数据，操作数据)
   写vue的目的：定义数据，操作数据，显示数据
   -->
     <script src="../js/vue.js"></script>
   

2. html>>body中声明元素

    <div id="app">
           <!-- 插值表达式{{属性名}},直接获取的是数据第一级的 -->
           {{name}}
           <span>{{person.id}}</span>
           <!-- 三元表达式 ,sex==1就是男,否则就是其他-->
           <h3>{{person.sex==1?"男":"其他"}}</h3>
           <!-- 通过下标索引拿到具体对象>>属性 -->
           <h3>{{cars[0].engine}}</h3>
    </div>
   

3. script标签内声明vue对象

   <script>
       // 申明一个数组array
       let arr = [{ name: "arrn", age: 18 }, { name: "jerry", age: 19 }]
       console.log(arr[1].name);//通过下标获取具体数组内容
       // 申明一个对象
       let obj = {
           id: 1,
           name: "Arran",
           age: 18
       }
       console.log(obj.name);
       // 控制台输出
       console.log(1111);
       new Vue({
           el: "#app", //element指定vue对象操作的元素
           data: {//声明数据
               name: "hello!!!",
               person: {
                   id: 1,
                   name: "arran",
                   age: 18,
                   sex: 1
               },
               cars: [{ brand: "大众", engine: "200cc" }]
           },
           methods: {//定义方法,操作数据
   
           }
       })
   </script>
   

vue对象作用域范围: Array, object,string…

二.Vue的常用指令

​ this指向vue对象

1.v-text和v-html

<div v-html="sex1"></div>

• v-text:更新数据内容,直接更新文本

  sex1:"女"
  //输出女
  

• v-html: 替换文本同时会解析html标签

   sex1: '<span style="color: red">男</span>'
  //输出: 男(红色)
  

2.v-show和v-if显示和隐藏数据

• v-show是css样式控制display
• v-if是删除dom元素

 <div id="app">
        <!-- v-show="flag" 属性值为true则显示否隐藏 -->
        <!-- v-show和v-if区别: 1.show使用css样式隐藏,适用频繁调用;2.if使用注释删除 -->
        <img v-show="flag" src="../img/on.png" alt="" width="200px" height="200px">
        <img v-if="flag" src="../img/on.png" alt="" width="200px" height="200px">
        <button @click="btn">显示|隐藏</button>
    </div>

 <script>
        new Vue({
            el: "#app",
            data: {
                flag: true
            },
            methods: {
                btn() {
                  //this指向vue对象
                    this.flag = !this.flag
                }
            }
        })
    </script>

3.v-on和@事件名触发事件

click: 点击一次;   当鼠标点击，触发事件

dblclick: 双击；当鼠标双击，触发事件

focus: 获取焦点；  当得到了光标，触发事件

blur: 失去焦点;   当失去了光标，触发事件

mouseover:鼠标移至；  鼠标移至某标签上方，触发事件
monseenter

mouserout:鼠标移出； 鼠标移出某标签上方，触发事件

keyup:键盘按下；  键盘按下，触发事件
input 内容发生改变

 <div id="app">
        <button @click="sub">-</button>
   //插值表达式
        {{num}}
        <button @click="add">+</button>
    </div>
    <script>
        new Vue({
            // 获取页面元素,#app选择器
            el: "#app",
            data: {
                num: 30
            },
            methods: {
                add() {
                    // this指当前的Vue对象
                    this.num++
                },
                sub() {
                    this.num--
                }
            },
        })
    </script>

4.v-bind设置元素属性

<!--点击图片更换图片,类似开关操作-->
<div id="app">
        <!-- v-bind:src="imgSrc"可省略 不写 v-bind -->
        <!-- 点击图片触发事件change -->
        <img :src="imgSrc" @click="change" alt="" width="200px" height="200px">
    </div>

 <script>
        new Vue({
            el: "#app",
            data: {
                imgSrc: "../img/on.png"
            },
            methods: {
                change() {//点击触发事件
                    if (this.imgSrc == "../img/on.png") {
                        this.imgSrc = "../img/off.png"
                    } else {
                        this.imgSrc = "../img/on.png"
                    }
                }
            }
        })
    </script>

5.created页面加载运行的代码块

页面加载就执行的代码块置于created()方法内

  // 页面加载时执行,每隔1s执行一次sub()
            created() {
                //每隔1s执行一次sub()方法
                //传递函数名（而不是函数调用）给另一个函数时,方法名后去掉()
                setInterval(this.sub, 1000)
            }

6.v-for

7.v-model双向绑定

输入框输入数据的同时插值表达式同时赋相同值

<body>
    <div id="app">
        <form>
          <!--输入框输入数据的同时插值表达式同时赋值-->
            <p>用户名:<input type="text" v-model="username">{{username}}</p>
            <p>帐户:<input type="text" v-model="account"></p>
            <p>密码:<input type="password" v-model="password"></p>
            <p>电话:<input type="tel" v-model="phone"></p>
            <p>邮箱:<input type="email" v-model="email"></p>
            <p>性别:<label for="man">
                    <input type="radio" name="sex" id="man" value="m" v-model="sex">男</label>
                <label for="wm">
                    <input type="radio" name="sex" id="wm" value="f" v-model="sex">女
                </label>{{sex}}
            </p>
            <p>年龄:<input type="text" v-model="age"></p>
            <p>创建日期:<input type="datetime" v-model="date"></p>
            <input type="button" value="提交" @click="commit">
        </form>
    </div>
    <script>
        new Vue({
            el: "#app",
            data: {
                username: "",
                account: "",
                password: "",
                phone: "",
                email: "",
                sex: "",
                age: "",
                date: ""
            },
            methods: {
                commit() {
                    console.log(`${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date}`);
                }
            },
            created() {

            }
        })
    </script>
</body>

mmit() {
console.log(${this.username},${this.account},${this.password},${this.phone},${this.email},${this.sex},${this.age},${this.date});
}
},
created() {

        }
    })
</script>