一、基础
vue和jquery一样，是前端的js库
在html文件中使用需导入vue.js:
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
{{xx}}来表示取某个变量xx的值
二、vue指令
v-model：双向数据绑定 用来在 input、select、textarea、checkbox、radio 等表单控件元素上创建双向数据绑定，根据表单上的值，自动更新绑定的元素的值。
msg: <input type="text" v-model="msg"><br>
data(){
return{
msg:'test',
}当msg的值改变时，input输入框中的内容也会发生改变
v-bind ：属性绑定 比方class属性，style属性，value属性，href属性等等，只要是属性，就可以用v-bind指令进行绑定
password: <input v-bind:type="input_type" v-model="password" :calss="my_class">
data(){
return
input_type: "password",
}绑定属性type，type的值为input_type，当input_type的值发生改变时，type值发生变化
v-for ：循环获取list或者dict中的内容
<h5 v-for="(name,index) in students">{{index}}欢迎{{name}}</h5>
<h5 v-for="(value,key) in students2">{{key}}:{{value}}</h5>
data(){
return{
students:["吴康飞", "刘慧杰", "郑佩", "刘佩"],
students2: {"name": "吴康飞", "age": 38},
}
},v-if：只有当指令的表达式返回值为true的时候才会被渲染，为false的时候，元素是不存在于页面中；
而v-show则不论指令表达式的返回值是什么，都会被渲染，并且只是基于css的款式切换，为false时，将display置为none(display:none),元素始终存在于页面中
v-show：v-if在条件切换时，会对标签进行适当的创立和销毁，而v-show则仅在初始化时加载一次，因而v-if的开销相对来说会比v-show大
<h1 style="font-size: 50px" v-if="dmn">美女</h1>
<button @click="show_meinv(1)">展示美女</button>
<h1 style="font-size: 3px" v-show="xmn">小美女</h1>
<button @click="show_meinv(2)">展示小美女</button>
methods: {
show_meinv(type) {
if (type == 1) {
this.dmn = !this.dmn
} else {
this.xmn = !this.xmn
}
}
}三、vue使用Element桌面组件库
element网站：https://element.eleme.cn/#/zh-CN
<!--引入element-ui组件库-->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 引入Element-ui样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
四、vue组件
组件作用：当一部分代码需要频繁重复使用，可以将代码写成组件，提高复用率
4.1定义全局组件
// 定义全局组件
<script>
Vue.component("guanggao", {
template: "<div class=\"guanggao\">{{msg}}-{{date}}</div>",
// props为组件接收的参数，在引用组件的位置传入
props: ["msg"],
// data为组件自己定义的参数
data() {
return {
date: "2021-08-21"
}
}
})
</script>4.1全局组件应用
<div id="app" style="width: 500px">
<!-- 引用全局组件-->
<guanggao msg="广告内容"></guanggao>
</div>4.2定义局部组件
// 定义局部组件
<script>
var guanggao2 = {
template: "<div class=\"guanggao2\">{{msg}}-{{date}}</div>",
props: ["msg"],
data() {
return {
date: "2021-08-21"
}
},
}
app = new Vue({
el: "#app",
// 在id为app的div中引用局部组件,需要在这里定义一下
components:{
"zp":guanggao2
},
})
</script>4.2应用局部组件
<div id="app" style="width: 500px">
<!-- 引用局部组件-->
<zp msg="广告2"></zp>
</div>五、计算属性和监听属性
computed是计算属性，某个变量是通过其他的操作计算得来的，那么就可以使用computed来计算
如果和计算的这个属性相关的值发生变化，那么computed的值也会动态变化。
<input type="password" v-model="password">
<!-- 显示password_upper的值，是将password转为大写展示的-->
<h5>{{ password_upper }}</h5>
new Vue(
{
computed: {
password_upper: function (){
// password_upper的值根据password来的，将password转为大写
return this.password.toUpperCase()
}
},
}watch是侦听某个属性，如果某个属性发送变化，可以通过它来触发一些操作
在watch里面使用不了data里面的变量，在computed里面是可以的。
<input type="text" v-model="username">
<p style="color: red">{{error_msg}}</p>
new Vue({
// 当username有变化时执行function
watch: {
username: function (val){
// console.log(val)
// this.get_username()
if (isNaN(val)!==false){
this.error_msg = "username只是数字"
}else{
this.error_msg = ""
}
}
},
}六、vue生命周期钩子
beforeUpdate：组件发生变化之前执行
updated：组件发生变化之后执行
beforeDestroy：组件销毁之前执行
distroy：组件销毁之后执行
<script>
Vue.component("zizhujian", {
template: "<div><h1 id='zzj' >我是子组件--{{msg}}</h1></div>",
props: ["msg"],
beforeUpdate: function () {
console.log("beforeUpdate")
//组件发生变化之前执行
},
updated: function () {
console.log("updated")
//组件发生变化之后执行
},
beforeDestroy: function () {
//组件销毁之前执行
console.log("beforeDestroy")
},
destroyed: function () {
//组件销毁之后执行
console.log("destroyed")
},
})
</script>beforeCreate：组件创建之前执行，这时候data还没有数据
created：组件创建之后执行，methods和data就有了，进入页面调用的接口放在这里
beforeMount：页面挂载之前执行
mounted：页面挂载之后执行，生成图表等功能写在这里
<script>
var vm = new Vue(
{
beforeCreate: function () {
//vue组件创建之前，这时候data里面还没有数据
console.log("beforeCreate...", this.username) //这时候没有
console.log("beforeCreate")
},
created: function () {
//组件创建之后，这时候methods和data就有了
// 进入页面调用接口写在这里
console.log("created...", this.username)
console.log("created")
},
beforeMount: function () {
//页面挂载之前，这时候还没有生成dom结构
console.log("beforeMount", document.getElementById("zzj"))
console.log("beforeMount")
},
mounted: function () {
//生成了dom结构
//生成图表等功能写在这里
console.log("mounted", document.getElementById("zzj"))
console.log("mounted")
},
}
</script>