01学习Vue-入门级别

一路向楠i

已于 2022-12-10 21:03:54 修改

阅读量190

点赞数

文章标签： vue.js 学习

于 2022-05-15 19:30:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_49074573/article/details/124786594

版权

1-vue一些简单的指令
注释已标注

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue的学习</title>
    <!--导入vue.js-->
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
</head>

<body>

<div id="app">
    <!--    1.监听数据-->
    {{message}}

    <!-- 2.v-bind绑定数据   -->
    <span v-bind:title="message">悬停</span><br/>

    <!--3.v-if 判断  -->
    <h1 v-if="type==='abc'">type是abc</h1>>
    <h1 v-else>type不是abc</h1><br/>

    <!-- 4.v-for  item in items / (item,index) in items -->
    <li v-for="(item,index) in items">
        {{item.a}}
        {{index}}
    </li>

    <!-- 5. v-on 绑定事件,,,method方法 /传参不传参,  -->
    <button v-on:click="sayHi()">点击1</button>
    <button v-on:click="sayHi2('你好')">点击2带参</button><br/>

    <!--6.双向绑定 v-model   -->
    双向绑定:<input type="text" v-model="textdata"/> _textdata={{textdata}}<br/>
<!--    textarea标签,必须写成这样才可以绑定<textarea></<textarea>-->
    textarea多行文本:<textarea  v-model="textareadata"></textarea>> 绑定值:{{textareadata}}<br/>

    <input type="radio" name="sex" value="男" v-model="sex" >男   <!--可以理解为 v-mode绑定表单的value值  扩展:checked为默认选中--->
    <input type="radio" name="sex" value="女" v-model="sex">女  选中的为:{{sex}}<br/>
    <!--  下拉框同理  扩展:selected为默认选中 disabled表示禁用-->
    <select v-model="sectiondata">
        <option value="" disabled>请选择---</option>
       <option value="AA">A</option>
        <option value="BB">B</option>
        <option value="CC">C</option>
    </select>选中的是:{{sectiondata}}
</div>

<script>
    var vm=new Vue({
        el:"#app",
        //model:数据
        data: {
            sectiondata:'',
            sex:'',
            textareadata:'',
            textdata:'',
            type: '1abc',
            message: 'hello message2',
            items: [
                {a: '我是a'},
                {a: '我是a'},
                {a: '我是a'}
            ],
        },
        //方法必须定义在vue的methods对象中!
        methods:{
            //方法名为sayhi
            sayHi:function () {//方法体
                alert("触发sayhi方法==我是data里的message="+this.message);
            },
            sayHi2:function (a) {
            alert(a);
            }
        },

    });
</script>

</body>
</html>