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)
}
}
4475
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
