（2）测试开发之路---------vue基础

1.vue简介

官网：Vue.js

是什么：用户界面的渐进式框架

2.vue环境

方式1.cdn方式引入（需联网）：

给script的 src属性设为：

<script src="https://unpkg.com/vue@next"></script>

​方式2.下载.js文件到本地后引入

1. 官网-安装-下载并托管中在unpkg中下载：UNPKG - vue
2. 选择版本号（无要求就最新）；
3. 查看 vue.global.prod.js (相对于vue.global.js是去空格压缩过的)
4. 点击【view Raw】查看原文，直接ctrl+A全选复制
5. 新建一个***.js文件，如 vue.js
6. <script src="相对路径/***.js"></script>

使用，如：   

 访问html，可以看见加载了vue的js文件

3.vue的helloWord例子

        功能作用：html中可以使用 script中的变量。

        涉及知识点：

         1. Vue.createApp() 初始化一个vue对象，参数为  组件对象{}

                组件对象{}，里面可以是函数，或变量，或js表达式

         2. 组件对象中 ，  有个属性为：data() 函数，{}里装的是属性  ，用return返回，这些就可以用到html里面

data(){
      return{name=“小陶”}
       }

或者data(){
            let name=“小陶”
            let age=18
            return{name,age}    //这里触发了【申明对象简写形式】

            }

        3. const app =Vue.createApp(**) 定义vue对象后，需要挂载到 某个元素   app.mount("Css选择器")  ，然后此元素下才能用 data里的属性

        4.插值语法  html用data里的属性，可以用 {{变量名}}，另外插值语法还可以   进行计算{{js表达式}}  如能计算：{{1=1}}

        5.指令语法：v开头的    v-bind:href 单向数据绑定：

href里的link会被解析成变量值，从而可以点击访问到链接。

数据只能从js流行html ，  简写 :href  如下：就是vue的helloworld例子，下面代码是放到body中的

<div id="hello-vue" class="demo">
    你好{{ message }}                                           <!-- 第三个知识点-->
        <h1>1+1={{1+1}}</h1>
        <a v-bind:href="vue3Li">点击跳转到vue官网</a>

    </div>


    <script src="../vue.js"></script>
    <script>
        
        const HelloVueApp ={


            data(){         // 这里存放页面需要引用的数据，通过return返回对象 
               
                message =     'hello Vue!!'
                vue3Li =    "https://www1.baidu.com/"                            //   第二个知识点---组件对象

                return{
                    message,
                    vue3Li
                }
                
            }   // 这个对象，装的是属性，最后返回属性
        
        
        
        }   //外面这个是组件对象

        Vue.createApp(HelloVueApp).mount('#hello-vue')          //   第一个知识点， //第4个知识点  挂载到某个元素，该元素的dom树都生效
    </script>

页面效果：

 4.单向绑定和双向绑定

知识点：

 1. vue的挂载语句放在最下面，然后可能找不到要挂载的元素（CSS写在head里，js语句写在body的最下面）

            2.单向绑定 v-bind:value  v-bind: 简写为：

            3.双向绑定 v-model=age   自动是关联，如input中用，自动关联的是value ，不用v-model:value

                双向绑定的三种修饰符

                3.1.双向绑定 的lazy修饰符，v-model.lazy 当脱离焦点时再进行同步（html>>>>js ）.trim

                3.2 双向绑定 的number修饰符  ，只把number传给js时，会转成 v-model.number   

                3.3 双向绑定 的 trim 修饰符，v-model.trim  会去掉收尾的空格

<div id="root">
        <input type="text" placeholder="请输入姓名" :value=name>        <!--单向绑定 v-bind:value  v-bind: 简写为：  -->
        <input type="text" placeholder="请输入年龄" v-model=age> <!--双向绑定 v-model=age   自动是关联的value ，不用:value-->  
        <h3>姓名：{{name}}</h3>
        <h3>年龄：{{age}}</h3>
        <h1>大家好</h1>
    </div>
    
    <script src="../vue.js"></script>
    <script>
        const vueapp ={
            data(){
                name="hello"
                age=18
                return{
                    name,age
                }
            }
        }

       const vm = Vue.createApp(vueapp).mount('#root')    

    </script>

 

 5. 事件触发

1.知识点1 ：事件触发信号给js表达式或方法   的写法

                v-on:事件=“方法”，  简写为   @事件=“方法”

                如按钮的点击事件，或者写成 @click

 <button v-on:click="age++">点我加1</button>

2.知识点2： 除了data（）以为，还有methods  可以在它里面定义一些函数

3.知识点3---事件触发信号传递给函数：

        a. 如下：@keyup.enter="checkName" 传递的函数没有括号，下面就可以接收形参

         b.如果事件传递给函数，有形参，又有事件，事件对象就写成 $event  如  checkName("小陶"，$event)-->

<div id="root">
        <!-- v-on:事件    简写 @事件   事件="js表达式"-->
        <button v-on:click="age++">点我加1</button>
        <h3>年龄：{{age}}</h3>

        <!-- 加法计算器 -->
        <input type="text" placeholder="请输入第1个值" v-model.number='value1'>
        <input type="text" placeholder="请输入第2个值" v-model.number='value2'>
        <button @click="add">计算</button>
        <h3>结果：{{res}}</h3>


        <!---->
        <input type="text" placeholder="请输入用户名" 
        v-model="username" @keyup.enter="checkName">        <!-- 回车键弹起事件, 如果不传自定义参数，可以不用写（）， 会默认传事件对象，
                                                            如果要传自定义参数，又要传事件对象，事件对象就写成 $event  如  checkName("小陶"，$event)-->  
        <h3>{{username}}</h3>
    </div>

    <script src="../vue.js"></script>
    <script>
        const vueApp ={

            // data定义属性 ----选项式API
            data(){

                return{
                    name:"tao",
                    age:11,
                    value1:'',
                    value2:'',
                    res:'',
                    username:''
                }
            },

            // 自定义方法
            methods:{
               
                add(){
                    this.res = this.value1+ this.value2         //this 代表整个vueApp对象
                },

                checkName(event){                              // event 为默认传递的事件对象，上面就不要写 （）
                    console.log(event.target.tagName)           //事件对象 作用到的目标
                }
            }
        }
        Vue.createApp(vueApp).mount('#root') 
        

    </script>

其他常用事件

@keyup。enter    监听回车键

其他按键

。enter   。tab    。delete   。esc   。space    。up    .down    .left     .right

6.if判断

知识点:

1.写法   v-if    v-else-if    v-else 

                                <!-- if 判断会直接控制有没有元素，即会改变dom结构 -->

                                     <!--v-show作用是控制了元素样式style="display: none;-->

                                    <!-- show的性能你开销小于if， 在元素频繁切换场景时，建议用show-->

                              <!-- v-else 接在v-if后面，可以实现分支效果 -->

<div id="root">
        <!-- <button @click="ate=true">开饭</button> -->
        <button @click="ate=!ate">抛硬币</button>
        <h3 v-else-if="drink">喝水</h3>

        <h3 v-if="ate">正面</h3>     
                                    <!-- if 判断会直接控制有没有元素，即会改变dom结构 -->
                                     <!--v-show作用是控制了元素样式style="display: none;-->
                                    <!-- show的性能你开销小于if， 在元素频繁切换场景时，建议用show-->
                              <!-- v-else 接在v-if后面，可以实现分支效果 --> 
         <h3 v-else>反面</h3> 

    </div>
    <script src="../vue.js"></script>
    <script>
        Vue.createApp({
            data(){
                return{
                    ate:false,
                    drink:true
                }
            },

            methods:{

            }
        }).mount('#root')


    </script>

7. for循环

v-for   

<div id="root">
    <h3>待办事项</h3>
    <ul>
      <!-- v-for用于需要循环渲染的元素上，常用于列表元素 -->
      <!-- v-for语法 v-for="item in itemlist" -->
      <li v-for="todo in todo_list">{{todo}}</li>
      <li>手写的-----</li>
    </ul>

  </div>
  <script src="../vue.js"></script>
  <script>
    Vue.createApp({
      data(){
        return{
          todo_list: ['吃饭','睡觉','打豆豆','hahaha','你好']
        }
      }
    }).mount('#root')
  </script>