VUE基础

一、基础

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>