Vue
Vue基础语法
创建对象及插值表达式
<!-- {{}}: 在html语法中就是一个简单字符串 --> <!-- {{}}: 在vue语法中, 叫插值表达式 --> <!-- 插值表达式: 是一个表达式, 这个表达式中使用到的参数, 要去对应的vue对象中取出 --> <div id="root"> <div> {{msg1 + msg2}} </div> </div> <script> // new Vue 创建一个Vue对象 // 一个Vue对象一旦创建, 会立即检测自己的el属性, 找到对应id的html作用域 // 和对应的作用域建立'绑定'关系 // 对应html作用域, 就变成了html + vue语法域 // 对应的新'绑定'的语法域, 要按照Vue语法重新解释 //每个页面的根root只能有一个，vue对象也只能有一个 new Vue({ el: "#root", data: {// 注意: Vue对象的data, 用来保存, 我们给这个Vue对象自定义的参数 msg1: 123, msg2: 1 } }) </script>
v指令
v-bind: 单向绑定
// v-bind: 单向绑定 // 把Vue对象的一个参数, 通过v-bind绑定到对应语法域的标签的属性上,会被vue对象中的参数影响值，但他不能反作用给vue对象
V-model: 双向绑定: 仅能用于表单元素的value
// v-model: 可以把表达元素的value值, 和对应的vue中参数建立双向联系, 相互影响，常用于input框中
V-text: 给一个标签内部插入文本或者带代码的文本
V-html: 极类似于dom操作的innerText和InnerHTML
V-on: 事件监听
// v-on可以监听事件, 把事件触发之后, 响应到vue对象中 // 注意 v-on: 可以简写成@
V-show: 隐藏和显示
V-if
V-else
V-else-if
两者的区别：如果 v-if不满足条件, 不显示, 意味着不会加载到dom上
v-show无论隐藏和显示, 始终都存在于dom树上, 只不过是通过css来隐藏和显示
V-for: 循环语句，一般用于循环渲染
// V-for: 循环语句 注意1: v-for指令做循环渲染的时候, 它所循环渲染的不仅仅只是遍历的内容, 它还会循环渲染出这个v-for指令所在的多个标签,并且对于每一个标签，都要求有一个唯一的key <div v-for="item in list"> {{item}} </div> -------------------------------------- <div> zs </div> <div> ls </div> <div> wu </div> 标准的写法： <div v-for="item in list " :key="item.id"> {{item.name}} --{{item.age}} </div> 这里要注意，中间要使用：隔开，in可以换成of，没有区别
计算属性和侦听器
计算属性: computed:
指的是一个属性通过其他属性计算而来。可以实时变化
new Vue({ el: "#root", data: { num1: 0, num2: 0 }, computed: { sum: function () { //sum会自动调用里面的函数，得到结果 return parseInt(this.num1) + parseInt(this.num2) } } })
侦听器/监听器
监听一个属性的改变, 触发一个事件，一定要注意是监听属性，和v-on有本质的区别
watch:
new Vue({ el: "#root", data: { inpustr: "", times: 0 }, watch: { inpustr: function () { this.times++ } } })
模板和组件
模板
template：
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.
<body> <!--template:--> <!--一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.--> <div id="root"></div> <script> // 一个Vue对象一旦创建, 先找el属性, 找到对应的绑定结点对象 // 再检测自己这个Vue对象是否有模板 // 如果有, 解析模板创建结点对象, 替换已经对应绑定的(在dom上那个)对象 new Vue({ el: "#root", data: { msg: "zs" }, template: "<div><div @click='f'>{{msg}}</div></div>", methods: { f: function () { alert("?") } } }) </script> </body>
简单理解为：root节点被挂载在vue对象上，创建对象的时候找到该节点，然后发现有模板，就将其替换掉，最终将div替换为
<div><div @click='f'>{{msg}}</div></div>
组件
一个Vue对象, 就是一个组件
component:
组件
template:
一个字符串模板作为 Vue 实例的标识使用。模板将会 替换 挂载的元素。挂载元素的内容都将被忽略.
组件的构建流程(非vue项目中使用)：先将组件创建成普通的js对象，里面的属性template，即模板，然后在vue对象中的componens里面进行注册，此时组件就作为root对应的vue对象的子组件，同时也是一个vue对象，再将自定义的组件对象写入root的模板中，这样就会自动读取出来
<script> var son1 = { template: "<div class='son1'>son1</div>" } var son2 = { template: "<div class='son2'>son2</div>" } var son3 = { template: "<div class='son3'>son3</div>" } var son4 = { template: "<div class='son4'>son4</div>" } new Vue({ el: "#root", data: {}, template: "<div class='div-root'><son1></son1><son2></son2><son3></son3><aaa></aaa></div>", components: { son1: son1, son2: son2, son3: son3, aaa: son4, } }) </script>
执行的流程：首先加载root挂载的vue对象，发现有模板，进行替换，又发现有son1标签，html中并没有这个标签，识别为vue语法，然后根据son1中的模板来进行替换
生命周期
一个vue对象从创建到消亡的过程中会自动调用的方法
beforeCreate:function () { //创建对象之前 console.log("控制台打印:beforeCreate") }, created:function () { //对象创建完成 console.log("控制台打印:created") }, beforeMount:function () { //页面还未被渲染 console.log(this.$el), console.log("控制台打印:beforeMount") }, mounted:function () { //页面渲染完成 console.log(this.$el), console.log("控制台打印：mounted") }, beforeUpdate:function () { //在更新之前 console.log("控制台打印：beforeUpdate") }, updated:function () { //更新完毕后 console.log("控制台打印：updated") }, beforeDestroy:function () { //对象销毁前 console.log("控制台打印：beforeDestory") }, destroyed:function () { //对象销毁完毕后 console.log("控制台打印：destroyed") }
Vue项目的构建
前后端分离的核心思想：
用户根据url发起请求到前端服务器，然后获得前端代码并解析，在解析的过程中发现需要数据，向后端服务器发起请求，后端从数据库中获取数据并发给用户，用户将前端和数据合在一起形成了带数据的页面
vue项目的构建流程
基础配置（只需安装一次，无需重复进行）： 1, 安装node (cnpm) npm install -g cnpm --registry=https://registry.npm.taobao.org 2, 安装vue-cli:脚手架工具 cnpm install -g @vue/cli cnpm install -g @vue/cli-init 3, 安装webpack: 模块打包机 cnpm install -g webpack
创建项目： vue init webpack 项目名(不能为中文) 注意：要选好路径名，可以直接在你想要创建项目的目录下输入cmd快速打开 安装包：cnpm install 此时要注意你安装包的目录是项目所在的根目录 启动这个前端vue项目 命令 npm run dev 关闭这个项目(停止) 命令ctrl + c, 已经关闭
组件之间的传值
父组件向子组件传值
父组件传递: 在子组件定义一个属性, 把父组件的数据通过单向绑定, 绑定到这个属性上
<son1 class="son1" v-bind:username="user.name"></son1>
子组件接收: props专门用来接收父组件的传值
props: ["username"]
注意: props 可以基本上等价看做data, 只不过props专门用来接收父组件的传值, 并且不可修改
使用步骤：首先在组件包下创建子组件的vue对象，并且在属性中写好props参数，然后在App下的子组件模板中写入绑定属性，在使用子组件的时候需要导包进入APP中并完成注册
<son1 class="son1" v-bind:username="user.name" ></son1> <son2 class="son2" v-bind:userage="user.age"></son2> <script> import Son1 from "./components/Son1"; import Son2 from "./components/Son2"; export default { data(){ return{ user: { name: "zs", age: 18, } } } </script> <template> <div> {{userage}} </div> </template> <script> export default { props: ["userage"] } </script>
写入绑定完成后，子组件中的username和userage属性就受到父组件中user.name和user.age的影响
子组件向父组件传值
子组件传递:
// 向父组件抛出一个方法 this.$emit("addage", 2)
父组件接收
<son1 v-on:addage="adduserage"></son1>
注意：需要在父组件中的子组件模板里面一直监听，使用v-on来监听事件，addage是我们自定义的方法名，adduserage相当于是将监听到的方法重写一个在父类中的名字，然后在父类中完成该方法的调用，注意参数只能写在methods里面，不能写入模板标签中
methods: { adduserage: function (num) { //此时的num就是我们传过来的参数2 this.user.age += num } }
整体的思想：首先子组件中点击事件触发方法，然后向父组件发出一个名字叫addage参数为2的方法，父组件监听该方法名，并获取该方法，重新命名，这样就可以在父组件中调用了，调用时方法的参数就是从子组件传过来的参数，在父组件中完成对值的修改操作
注意：如果同时调用两个方法，需要在方法名之间用逗号隔开
bus传值
// 单独维护一个中转站传值
1, 创建一个bus文件
最好单独创建一个名为bus的包，专门用来存储bus文件 // 导入vue语法 import Vue from 'vue' // 根据Vue语法创建一个vue对象 const bus = new Vue() // 默认暴露这个对象 export default bus
2, 在main,js配置
import bus from './bus' // 相当于: 给整个项目配置的所有Vue对象配置一个参数: $bus Vue.prototype.$bus = bus
3, 使用
使用的方法类似于父组件向子组件传值，都是使用方法进行传值
传递值：
this.$bus.$emit("addnum", this.inputnum)
第一个值是方法名，第二个是要传递过去的值，一般调用的是对象中的属性
接收值：
mounted() { var _this = this this.$bus.$on("addnum", res => { _this.times += parseInt(res) })
mounted类似于props，是一个专门用来监听的区域，on表示监听事件，一直监听addnum这个方法，接收到的参数为res(可自定义)，=>表示对这个参数来进行处理，相当于lambda里面的对方法体进行传参
axios网络请求
vue如果要引入/使用别的第三方框架:
1, 导包或者导入配置文件
cnpm install axios --save
2, 在main.js配置
import axios from 'axios' Vue.prototype.$axios = axios
3, 使用
methods: { getdata () { var _this = this this.$axios.get("http://115.29.141.32:8084/api/mall/getGoodsByType?typeId=1").then( res => { _this.list = res.data.data }) } }
methods: { getdata () { var _this = this var obj = { "amount":100, "goodsDetailId": 1230, "num": 1, "state": 0, "token": "admin" } this.$axios.post("http://115.29.141.32:8084/api/mall/addOrder", obj) } }
