准备工作：
1、官方文档：https://cn.vuejs.org/v2/guide/
2、node.js安装，之前学习appium有提到：https://www.cnblogs.com/yinwenbin/p/10853586.html
拷贝项目到mac，遇到问题：first_vue_project/node_modules/.bin/vue-cli-service: Permission denied
解决办法：赋权即可 chmod 777 /Users/此处是项目根目录/node_modules/.bin/vue-cli-service
3、vue的调试工具 vue-devtools 的安装和使用：https://www.cnblogs.com/chenhuichao/p/11039427.html
npm install遇到问题，发现上面教程有坑，在clone代码下来后，必须切换到tag v5.1.1 而不是什么master、dev什么的（为什么是这个版本，因为之后稳定的版本都没有shells目录）
其他：必需要在有使用vue的html上才会在调试的时候显示vue插件
git checkout v.5.1.1
2023-03-02发现可以直接在谷歌应用商店安装 https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd
4、设置国内的镜像
npm config set registry https://registry.npm.taobao.org
一、文本填充 和 元素的属性绑定
1、引用源
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
2、创建vue对象
var vue = new Vue({ el: "挂载对象", data: { desc: "用来保存数据" }, methods: { count: function() { console.log("页面操作要使用的函数") } }
3、文本填充
a、插值表达式：{{值}}
<li>姓名：{{info.name}}</li>
b、v-text 指令
<li v-text="info.age"></li>
c、v-html 指令
<p v-html="<a href='https://www.baidu.com'>百度</a>"></p>
d、v-pre 指令，显示原始的数据格式,不会被vue渲染
<li v-pre>性别：{{info.sex}}</li>
4、元素属性绑定
a、v-bind ,可以简写成冒号 :
<a v-bind:href="a">百度一下，你就知道</a> <a :href="a">简写v-bind</a>
b、事件绑定 v-on 可以简写@
<button type="button" v-on:click="count()">计算</button> <button type="button" @click="count()">计算</button>
c、数据双向绑定 v-model（绑定的是表单元素 value），默认用户输入的数据当成字符串处理（ Vue表单修饰符：lazy,number,trim）
将用户的输入数据转换为数值 v-model.number
将用户的输入数据去除前后空格 v-model.trim
数据输入完后才会数据同步 v-model.lazy
<input type="text" name="a" v-model.number.lazy="aa" />
示例
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <!-- 使用vue，必须引用这个 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <ul> <li id="li1">姓名：</li> <li id="li2">年龄：</li> <li id="li3">性别：</li> </ul> <ul> <li>姓名：{{info.name}}</li> <li v-text="info.age">年龄：</li> <li v-pre>性别：{{info.sex}}</li> </ul> <h4>{{desc}}</h4> <p v-html="p"></p> <!-- 元素属性绑定 v-bind --> <a v-bind:href="a">百度一下，你就知道</a> <p></p> <a :href="a">简写v-bind</a> <p></p> <!-- 数据单向绑定 --> <!-- 数值A：<input type="text" name="a" :value="aa" /> <br> 数值B：<input type="text" name="b" :value="bb" /> <br> --> <!-- 数据双向绑定 --> 数值A：<input type="text" name="a" v-model.number.lazy="aa" /> <br> 数值B：<input type="text" name="b" v-model.number="bb" /> <!-- 事件绑定v-on --> <!-- <button type="button" v-on:click="count()">计算</button> --> <button type="button" @click="count()">计算</button> <h5>结果：{{cc}}</h5> </div> <script> // 原始方法js 往页面填充数据 data = { name: "张三", age: 18, sex: "男" } document.getElementById("li1").innerText = document.getElementById("li1").innerText + data.name document.getElementById("li2").innerHTML = document.getElementById("li2").innerHTML + data.age document.getElementById("li3").innerHTML = document.getElementById("li3").innerHTML + data.sex /* 一、文本填充 1、插值表达式{{值}} 2、v-text 指令 3、v-html 指令 4、v-pre 指令，显示原始的数据格式,不会被vue渲染 二、元素的属性绑定 1、v-bind ,可以简写 : 2、事件绑定 v-on 可以简写@ 3、数据双向绑定 v-model（绑定的是表单元素 value），默认用户输入的数据当成字符串处理 将用户的输入数据转换为数值 v-model.number 将用户的输入数据去除前后空格 v-model.trim 数据输入完后才会数据同步 v-model.lazy */ // 初始化一个vue对象 var vue = new Vue({ // el 用来指定挂载对象 el: "#app", // data 用来保存数据 data: { info: { name: "张三", age: 19, sex: "男" }, desc: "这是一个标题", p: "<a href='https://www.baidu.com'>百度</a>", a: 'https://www.baidu.com', aa: 11, bb: 22, cc: null }, // 页面操作要使用的函数 methods: { count: function() { this.cc = this.aa + this.bb } } }) </script> </body> </html>
二、条件判断和遍历
1、v-if、v-else-if、v-else
符合条件就被渲染出来，v-else是这组判断的结束标志，按pyhton中理解就行。
2、v-for
遍历数组元素：v-for='item in cases'
遍历数组元素和下标：v-for="(item,index) in cases"
遍历对象值：v-for="item in obj"
遍历对象key、value（第一个参数是value，第二个参数是key）：v-for="(value,key) in obj"
示例
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script> </head> <body> <div id="app"> <!-- 符合条件就被渲染出来，按pyhton中理解就行 --> <div v-if="case_.result=='success'" style="color: green;" id="">{{case_}}</div> <div v-else style="color: #FF0000;" id="">{{case_}}</div> <div v-show="case_.show" id="">显示出来 </div> <table border="" cellspacing="" cellpadding=""> <tr> <th>ID</th> <th>用例名</th> <th>结果</th> </tr> <!-- 遍历数组 v-for --> <tr v-for='item in cases'> <td>{{item.case_id}}</td> <td>{{item.title}}</td> <td v-if="item.result=='success'" style="color: green;">{{item.result}}</td> <td v-else style="color: red;">{{item.result}}</td> </tr> <!-- 遍历数组 --> <div v-for="(item,index) in cases">{{item}}=={{index}}</div> <!-- 遍历对象 --> <div v-for="item in obj">{{item}}</div> <div v-for="(value,key) in obj">{{key}}=={{value}}</div> </table> </div> <script> /** * v-if * v-else-if * v-else * * v-show ，控制元素的display属性，true、false */ var vm = new Vue({ el: "#app", data: { case_: { case_id: 1, title: "用例001", result: "success1", show: false }, cases: [{ case_id: 1, title: "用例001", result: "success", }, { case_id: 2, title: "用例002", result: "error", }, { case_id: 3, title: "用例003", result: "fail", }], obj: { case_id: 4, title: "用例004", result: "fail", } } }) </script> </body> </html>
