vue的基本用法

1、vue实例

vue 要在body标签里面，引入一对script标签，src="vue.js"导入vue

再引入一对script来new一个vue的实例，使用

<body>
    <div id="app"> 
      被下面的Vue实例接管
  </div>  

<script src="vue.js"></script>
<script>
    //new 一个Vue对象
    new Vue({
        el: '#app', //el:代表接管的div元素-id是app
        data: {     //data 是对象里面的数据
            sex: 2
        },
        methods: {  //methods：是对象里面的方法
            change: function () {
                alert('打印alert')
            }
        }
    })
</script>
</body>

2、vue的用法

2.1、{{ xx }}直接显示数据

在div标签里，直接{{ }}，就能显示在vue里data下定义的数据

{{ }}模板语言只能应用于标签中间

<div id="app">
    <div>{{sex}}</div>
    
</div>

2.2、 v-on 指令绑定\绑定事件

<div id="app">
    <div>{{sex}}</div>
    <input type="button" @click="change" value="指令绑定">
    <input type="button" v-on:click="change" value="全写">
</div>

click对应的方法是 vue实例里面的methods的方法

其中 @ 是简写

v-on:是全写

2.3、 v-bind 标签属性绑定

v-bind：

加了v-bind:xxx之后，该xxx属性就可以应用data里面的数据

在属性前面写上v-bind，会自动去寻找vue里面是否有url的值

其中，全写 v-bind:

简写 :

<div id="app">

    <a v-bind:href="url">引用data里的url</a>
    <a :href="url">简写</a>

</div>

2.4、 v-if v-elif-if v-else 条件判断和v-show

例：接口测试平台，成功失败，根据后台返回的结果状态。显示对应的文案

其中，phoneNumber是data里面的值

<div id="app">
    <span v-if="phoneNumber==10086">移动公司</span>
    <span v-else-if="phoneNumber==10010">联通公司</span>
    <span v-else>电信公司</span>
    <span v-show="phoneNumber==10086">移动公司</span>
</div>
<script src="./day12/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data:{
            phoneNumber: 10010
        }
    })
</script>

v-if 只有符合条件的元素才加载

v-show就是如果条件不匹配，就不展示，会自动加上一个display标签

如果条件为False 则对标签增加 display=none

2.5、 v-for 循环

循环列表和循环列表并且展示脚标

<div id="app">
<!--games:['绝地求生','英雄联盟','王者荣耀']-->
    <ul>
        <li v-for="game in games">{{game}}</li>
        <!--    要展示脚标的-->
        <ul v-for="(game,index) in games">{{game}}--{{index+1}}</ul>

    </ul>
</div>

展示字典里的value

<div id="app">
<!-- games:{'name':'绝地求生','company':'蓝洞'}-->
    <ul>
        <li v-for="game in games">{{game}}</li>
    </ul>
</div>

展示字典里的key,value

<div id="app">
<!-- games:{'name':'绝地求生','company':'蓝洞'}-->
<!--要展示key和value，所有的v-for循环里面，index都是在后面，先是value，后是key-->
    <ul>
        <li v-for="(value,key) in games">{{key}}:{{value}}</li>
    </ul>
</div>

列表里有字典取出来名字

<div id="app">
<!--games:[{'name': '绝地求生'},{'name':'英雄联盟'},{'name':'王者荣耀'}]-->
    <ul>
        <li v-for="game in games">{{game.name}}</li>
    </ul>
</div>

2.6 v-model 双向数据绑定，就是和value进行绑定

<div id="app">
<!--    v-model  双向数据绑定 输入框-->
    <div>{{input_value}}</div>
    <!--    将输入框的输入数据 和input_value进行了双向绑定，input_value的默认是defaul-->
    <input type="text" v-model="input_value">
    <!--给按钮，绑定了change方法，change方法是将input_value变成厂 value-->
    <input type="button" value="change" @click="change">
    
<!--        双向绑定 单选框  将选择框的value和sex的值进行了双向绑定-->
    <div>{{sex}}</div>
    <input type="radio" value="1" name="sex" v-model="sex">男
    <input type="radio" value="2" name="sex" v-model="sex">女
    
<!--        双向绑定 列表，复选框-->
    <div>{{movies}}</div>
    <input type="checkbox" value="钢铁侠" v-model="movies">钢铁侠
    <input type="checkbox" value="特斯拉" v-model="movies">特斯拉
    
<!--        双向绑定，下拉选择框-->
    <div>{{movie}}</div>
    <select v-model="movie">
        <option disabled value="">请选择</option>
        <option value="钢铁侠">钢铁侠</option>
        <option value="战狼">战狼</option>
    </select>

    <div>这里是movie：{{movie}}</div>
    <select v-model="movie">
<!--    v-model movie就是 将movie和option的value进行了双向数据绑定-->
<!--    需求是展示name到页面，将id作为value，value必须用 :value，这样才能-->
<!--    和option.id绑定(：是v-bind的简写，这样能应用data里面的数据)-->
        <option disabled value="">请选择</option>
        <option v-for="option in options" :value="option.id">{{option.name}}</option>
    </select>
</div>

data:{
    input_value:'default',
    sex:2,
    movies:['钢铁侠','战狼'],
    movie:'',
    options:[{"name":"战狼","id":1},{"name":"特斯拉","id":2},{"name":"钢铁侠","id":3}]
        },
methods:{
    change:function () {
    this.input_value = 'change value'
           }
    }

posted @ 2022-05-09 16:41 南北t 阅读(320) 评论(0) 收藏举报

刷新页面返回顶部