vue框架使用

1、介绍

vue具有简单易学，灵活高效等特点所以广泛受到开发者的青睐，对新手学习web开发必备的技能。

2、vue.js的安装

下面是vue.js的安装路径
vue的官网下载：

可以通过分享下载：vue插件 提取码：dm4x

3、vue.js的导入

将vue.js包放入web包的新建js文件夹下

在html文件中导入vue

<script src="js/vue.js"></script>

vue的用法

1、属性v-bind和模型v-model

<div id="app">
    <a v-bind:href="url">点击一下</a>
    <input v-model="url">
    {{url}}
</div>
<script src="js/vue.js"></script>

<script>
    //1 创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"http://www.baidu.com"
            }
        }
        
    })

</script>

运行结果：

按钮绑定事件v-on

用Vue创建app对象，data用来存储对应的属性和值，通过v-bind来绑定定义的属性，v-model绑定值当输入框中的值发生改变时是对应点击跳转页面也会随之发生改变。

<div id="app">
    <input type="button" value="一个按钮" v-on:click="show()">
    <input type="button" value="一个按钮" @click="show()">
</div>
<script src="js/vue.js"></script>

<script>
    //1 创建vue核心对象
    new Vue({
        el:"#app",
        methods:{
            show(){
                alert("我被点了")
            }
        }
        

通过vue中methos来添加方法通过v-bind：click或@click来绑定对应的事件。

条件判断 v-if

<div id="app">
    <div v-if="count==3">div1</div>
    <div v-else-if="count==2">div2</div>
    <div v-else>div3</div>
    <hr>
    <div v-show="count==3">div4</div>
    <br>
    <input v-model="count">
</div>
<script src="js/vue.js"></script>

<script>
    //1 创建vue核心对象
    new Vue({
        el:"#app",
        data(){
            return{
                username:"",
                url:"http://www.baidu.com",
                count:3
            }
        },
       

通过v-if来确定div的显示内容