测试开发之Vue学习笔记-Vue基础

Vue基础

Vue官方文档： https://cn.vuejs.org/v2/guide/syntax.html

1. Vue环境搭建

（1）为什么用框架（Angular,React,Vue)

很多业务逻辑移动到前段实现，Javascript文件会 越来越多，处理也胡变得更加复杂

（2）为什么选择Vue

1.渐进式框架

2.双向数据绑定

3.不需要操作DOM，状态机，状态的改变会引起试图的更新

4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能实现

5.Vue环境构建非常方便，vue-clie指令

6.Vue单文件组成，组件化开发

7.社区非常强大，提供各种各样的插件供我们使用

（3）安装

• 下载并安装nodejs：http://nodejs.cn/download/

• 安装cnpm：npm install -g cnpm --registry=https://registry.npm.taobao.org

• 安装vue脚手架：npm install --global vue-cli

要安装vue-cli（可以不用安装vue），不然提示vue不是本地命令

（4）新建项目

• 初始化项目
  vue init webpack my-project

• 填写项目信息

• Project name vb

• Project description A Vue.js project

• Author hanzhichao

• Vue build standanlone

• Install vue-router No

• Use ESLint to lint you code No

• Set to unit test No

• Setup e3e tets with Nightwatch No

• Yes use NPM

• 安装依赖
  cd my-project
  npm install

• 运行开发环境
  npm run dev

什么是npm？
npm是随同Nodejs一起安装的包管理工具，能解决Nodejs代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

什么是webpack？
webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。
https://www.cnblogs.com/-walker/p/6056529.html

2. Vue项目结构

入门示例

** main.js入口解释**

src/main.js

CopyimportVuefrom'vue'importAppfrom'./App'Vue.config.productionTip = false// 生产环境配置提示newVue({
  el: '#app',  // 绑定根视图components: { App },  // 加载组件template: '<App/>'// 使用组件

模板语法

• 文本：模板 {{ 变量 }} （Mustache语法 ）

• 原始html：v-html="变量" 可以解析DOM

示例：

src/App.vue

Copy<template><divid="app">
    {{ demo }}  <!--只能展示文本--><divv-html="demo"></div><!--可以展示html--></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { demo: "<h1>第一个Vue Demo</h1>" }
  }, 
  components: {
  }
}
</script><style></style>

Vue的组件结构

Copy<template>
    html模板区
</template><script>
    数据逻辑区
</script><style>
    样式区
</style>

项目结构

Copybuild/  --- 构建配置文件目录config/  --- 不同环境配置文件目录
node_modules/  --- 依赖包
src/  --- 源码
    assets/  --- 资源文件目录
    conponents  ---  组件目录
    App.vue  --- Vue的单文件组件 
    main.js  --- 入口函数
static/  --- 静态文件目录
.babelrc  --- babel配置文件
.editorconfig
.gitignore  --- git忽略文件
.postcssrc.js  --- postcss配置文件
index.html  --- 项目根视图package-lock.json
package.json  --- 依赖包配置
README.md  --- 项目说明

什么是babel？
babel是一个工具链，主要用于将ES6及以上版本的代码转换为向后兼容的 JavaScript语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

什么是postcss?
postcss是一种基于插件的css编译的工具，类似babel对js的处理，常见的功能如：
1.使用下一代css语法
2.自动补全浏览器前缀
3.自动把px代为转换成rem
4.css代码压缩等等
https://jianshu.com/p/288963680642

什么是ES6?
ES即ECMAScript，是JavaScript中的语法规范。ES6即ECMAScript 6标准语法。

3. Vue基本指令

• 文本：{{ }}

• 原始html：v-html

• 绑定属性：v-bind，简写为:

• 表达式：{{ Javascript表达式 }} （只支持单行表达式语句）

• 条件渲染：

• v-if v-else v-else-if

• v-show

• 列表渲染：v-for 支持索引(item,index) 支持遍历数[...]和对象{...} 一般要给出索引v-bind:key="index"来维护顺序状态。

• 事件绑定：v-on 简写为@

v-if和v-show的区别：v-if是添加移除节点，v-show是控制节点的display。
v-if有更改的切换开销，而v-show有更改的初始渲染开销。如果需要频繁切换用v-show较好。如果运行时改变较少，用v-if较好。

示例：

src/App.vue

Copy<template><divid="app">
    {{ demo }}  <!--只能展示文本--><divv-html="demo"></div><!--可以展示html--><divclass="white"v-bind:class="active"v-bind:data-id="id">Hello</div><!--绑定属性-->
    {{ 1+1 }}  <!--使用Javascript表达式-->
    {{ 10>9?'对了':'错了'}}
    {{ [1,2,3].toString() }}
    {{ [1,2,3].push(4) }}
    <divv-if="flag">
      我是条件渲染    <!--条件渲染--></div><templatev-if="flag2"><!--template不会被渲染--><p>1</p><p>2</p><p>3</p></template><templatev-else><!--自动匹配上一个v-if--><p>4</p></template><divv-show="flag2">我是v-show</div><ul><liv-for="item in names">{{ item }}</li><!--列表渲染--></ul><ul><liv-bind:key="index"v-for="(item,index) in names">{{ index+1 }} - {{ item }}</li><!--支持使用索引--></ul><ul><liv-bind:key="index"v-for="(obj,key,index) in objs">{{ index+1 }} - {{ key}} : {{ obj }}</li><!--支持对象遍历--></ul></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      demo: "<h1>第一个Vue Demo</h1>",
      active: "active",
      id: 19,
      flag: false,
      flag2: true,
      names: ['kevin', 'eric', 'lily'],
      objs: {"name": "kevin", "age": 18},
  }
  }, 
  components: {
  }
}
</script><stylelang="css">.white {
    color: white
  }
  .active {
    background-color: red
  }
</style>

数组更新检测

以下数组操作可以引起视图更新

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

而filter()、concat()和 slice()等方法由于不改变原数组，不会引起视图更新。

示例：

Copy<template><divid="app"><ul><liv-for="item in names">{{ item }}</li></ul><buttonv-on:click="addItem"type="button"name="button">添加</button></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      names: ["kevin", "eric", "lily"]
  }
  }, 
  methods: {
    addItem(event){
      this.names.push('superhin')
    }
  }
}
</script><stylelang="css"></style>

class与type绑定

• <p v-bind:class="{ active: isActive }">哈哈哈</p> 使用isActive变量

• <p v-bind:class="{ active: 0<10 }">哈哈哈</p> 使用表达式

• <p v-bind:class="[h1, h2]">哈哈哈</p> 使用h1和和两个变量

• v-bind:style='myStyle' 应用myStyle样式myStyle: {color: 'red'}`

示例：

Copy<template><divid="app"><div><pv-bind:class="{ active: isActive }">哈哈哈</p><pv-bind:class="[h1, h2]">哈哈哈</p><pv-bind:style="myStyle">哈哈哈</p></div></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      isActive: true,
      h1: 'hh1',
      h2: 'hh2',
      myStyle: { color: 'red', fontSize: "30px"}
  }
  }, 
  methods: {
    addItem(event){
      this.names.push('superhin')
    }
    
  }
}
</script><stylelang="css"></style>

计算属性和观察者

页面中复杂的计算逻辑，如

Copy{{ msg.split('').reverse().join('') }}

应使用计算属性。

示例：

Copy<template><divid="app"><p>{{ msg }}</p><p>{{ messageInfo }}</p></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      msg: "hello,world"
  }
  }, 
  computed: {  //计算属性messageInfo(){
      returnthis.msg.split('').reverse().join('');
    }
  }
}
</script><stylelang="css"></style>

计算属性和方法的区别，计算属性可以缓存，只要变量不变则不重新计算，方法每次都会重新计算。

4. Vue事件应用

• 监听事件： v-on:click="counter += 1"

• 调用事件函数：v-on:click="func"

Copyexportdefault {
    ...
    data(): {
        msg: "hello"
    }
    methods: {
        func(event) {
            this.msg="world";
        }
    }

• 传递参数：v-on:click="func2('vue')"

Copyexportdefault {
    ...
    methods: {
        ...,
        func2(text) {
            console.log(text);
        }
}

• 事件修饰符（修饰符可以串联）

• .stop：阻止单击事件继续传播

• .prevent：提交事件不再重载页面

• .capture：内部元素触发的事件先在此处理，然后才交由内部元素进行处理

• .self：只对当前元素生效

• .once：点击事件将只会触发一次

• .passive：滚动事件的默认行为 (即滚动行为) 将会立即触发

• 按键修饰符 v-on=keyup.enter="submit"

• .enter

• .tab

• .delete (捕获“删除”和“退格”键)

• .esc

• .space

• .up

• .down

• .left

• .right

监听事件示例：

Copy<template><divid="app"><buttonv-on:click="counter += 1"type="button"name="button">按钮</button> 
    {{ counter }}
    <div><buttonv-on:click="clickHandler"type="button"name="button">第二按钮</button>
      {{ eventShow }}
    </div><buttonv-on:click="dataevent(content,$event)"type="button"name="button">第三按钮</button><inputv-on:keyup.enter="getInfo"/></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      counter: 1,
      eventShow: "我是孙悟空",
      content: "为师寂寞了"
  }
  }, 
  components: {
  },
  methods: {
    clickHandler(event){
        console.log('事件');
        this.eventShow="我是六耳猕猴";
    },
    dataevent(data){
      console.log(data);
    },
    getInfo(event){
      // if(event.keyCode === 13) {//   console.log('你按了回车键');// }console.log('你按了回车键');
      
    }
  }
}
</script><stylelang="css"></style>

5. Vue双向数据绑定

表单输入绑定：v-model

• 文本框/文本域：input/textarea v-model="msg"

• 单选/复选框：多个选项v-model使用同一个值

• 下拉框：在select处设置 select v-model="selected"

修饰符

• .lazy：v-model.lazy 不是每输入一个就改变

• .number：转为数字

• .trim：不处理空白字符
  示例：
  src/App.vue

Copy<template><divid="app"><inputv-model.lazy="msg"type="text"name="" ><p>{{ msg }}</p></div></template><script>exportdefault {
  name: 'App',
  data(){
    return { 
      msg: "hello",
  }
  }, 
  components: {
  },
  methods: {
    
  }
}
</script><stylelang="css"></style>

如有不懂还要咨询下方小卡片，博主也希望和志同道合的测试人员一起学习进步

在适当的年龄，选择适当的岗位，尽量去发挥好自己的优势。

我的自动化测试开发之路，一路走来都离不每个阶段的计划，因为自己喜欢规划和总结，

测试开发视频教程、学习笔记领取传送门！！！