Vue

Vue.js 是一个用于构建用户界面和单页应用的渐进式 JavaScript 框架，具有响应式的数据绑定和组件化的开发模式。

Vue快速入门

<div id="app">
    <input v-model="username">
    <!--插值表达式-->
    {{username}}
</div>

<script src="js/vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:""
            }
        }
    })
</script>

Vue指令

v-bind

v-bind 用于动态地绑定一个或多个属性到一个元素上

    <a v-bind:href="url">点我试试</a>
    在这里填写你要访问的网址
    <input v-model="url">

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://blog.mxy520.online"
            }
        }
    })
</script>

v-on

v-on可以绑定事件, 有两种写法

    <input type="button" value="我是一个按钮" v-on:click="show()"><br>
    <input type="button" value="第二个按钮" @click="show()">

<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://blog.mxy520.online"
            }
        },
        methods:{
            show(){
                alert("我被点了...")
            }
        }
    })
</script>

v-if以及v-show

v-if 和 v-show 的渲染方式不一样
当v-if 的条件不满足时, 内容不会出现在html代码中
而 v-show 的条件不满足时, 内容会出现在代码中, 只不过display=none

    count
    <input v-model="count">
    <div v-if="count==4">count=4</div>
    <div v-else-if="count==5">count=5</div>
    <div v-else>count不知道等于什么玩意...</div>
    
    <hr>
    <div v-show="count==3">我可能会在count=3的时候出现</div>
    <hr>
<script>
    new Vue({
        el:"#app",
        data(){
            return {
                username:"",
                url:"https://blog.mxy520.online",
                count:4
            }
        },
        methods:{
            show(){
                alert("我被点了...")
            }
        }
    })
</script>

v-for

顾名思义就是用来for循环的指令
甚至还有下标功能

    <div v-for="addr in addrs">
        {{addr}}
    </div>

    <div v-for="(addr, i) in addrs">
       {{i+1}}-->{{addr}}
    </div>

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://blog.mxy520.online",
                count: 4,
                addrs: ["南昌", "北京", "武汉", "黄乘明"]
            }
        },
        methods: {
            show() {
                alert("我被点了...")
            }
        }
    })
</script>

Vue生命周期

mounted:页面加载完毕, 可以发送异步请求了

<script>
    new Vue({
        el: "#app",
        data() {
            return {
                username: "",
                url: "https://blog.mxy520.online",
                count: 4,
                addrs: ["南昌", "北京", "武汉", "黄乘明"]
            }
        },
        methods: {
            show() {
                alert("我被点了...");
            }
        },
        mounted(){
            alert("页面加载完成");
        },
        
    })
</script>

Element

Element快速入门

首先引入Element的js和css, 以及Vue的css, 最后new 一个Vue的实例
因为Element是基于Vue的

<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">

<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>
    new Vue({
        el:"#app"
    })
</script>

Element布局