(vue1)vue基础

最新推荐文章于 2023-08-17 18:17:21 发布

志飞

最新推荐文章于 2023-08-17 18:17:21 发布

阅读量420

点赞数

分类专栏： vue 文章标签： vue基础

本文链接：https://blog.csdn.net/figo0423/article/details/124312815

版权

vue 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

现在很多前端项目都用vue这个js框架，应该说是很热门的一个框架了，本文通过代码学习vue的一些基础操作，后续再写相关实战内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script lang="javascript">
        function alerttest()
        {
            alert(123);
        }
    </script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
    <div id="abc">
       <!--数据绑定-->
       <p>{{name}},{{age}}</p>
       <!--调用函数-->
       <p>{{sayHello()}}</p>
       <!--数据绑定之v-html-->
       <p v-html="grade"></p>
       <!--数据绑定之布尔值-->
       <p>{{graduated?"已毕业":"未毕业"}}</p>
        <!--数据双向绑定之v-model-->
        <p><input type="text" v-model="age"/></p>
        <p><textarea v-model="age"></textarea></p>
        <p><select v-model="selected">
            <option value="a">请选择</option>
            <option value="b">香蕉</option>
            <option value="c">苹果</option>
        </select></p>
        <!--是否可见v-if-->
        <p v-if="visible">是否可见？{{visible}}</p>
        <!--v-else-->
        <p v-else>不可见</p>
         <!--是否可见v-show与if区别是，show只是不可见，没有从dom移除，而if将完全从dom移除-->
         <p v-show="visible">是否可见？{{visible}}</p>
        <!--v-bind绑定html属性-->
        <p><a v-bind:href="url" target="_blank">跳转到百度</a></p>
        <!--过滤器-->
        <p>{{name|toUpper}}</p>
        <!--v-for 循环数组-->
        <div>
            <ul>
                <li v-for="x in options">{{x}}</li>
            </ul>
        </div>
        <!--v-for 循环对象-->
        <div v-for="v in objtest">
            {{v}}
        </div>
        <!--v-for 循环对象,显示key和value-->
        <div v-for="(v,k) in objtest">
        {{k}}:{{v}}
        </div>
         <!--v-for 循环对象,显示key和value index-->
        <div v-for="(v,k,i) in objtest">
            {{i}}:{{k}}:{{v}}
        </div>
        <!--v-for 循环对象数组,显示key和value index-->
        <div v-for="student in objArr">
            {{student.name}}-{{student.age}}-{{student.sex}}
        </div>
        <!--v-on 或@绑定函数-->
        <di>
            <button v-on:click="say('hello,world!')">v-on测试1</button>
            <button v-on:click="test('hi!')">v-on测试2</button>
            <button @click="test('hi!')">v-on测试3</button>
        </di>
    </div>
    <script>
        var mydata={name:"andy",age:18,sex:"男",grade:"<h1>大一</h1>",
        graduated:false,selected:"b",visible:false,url:"https://www.baidu.com",options:[1,2,3,"a","b","c"],objtest:{a:1,b:"你好",c:"china"},
        objArr:[{name:"jack",age:18,sex:"F"},{name:"rose",age:18,sex:"M"}]
    }
        var myVue=new Vue({
            el:"#abc",
            //data:{
             // message:"hello vue.js!"
           // },
           data:mydata,
            methods:{
                sayHello:function(){
                    return this.name+",抢菜抢了个寂寞!";
                },
                say:function(str)
                {
                    alert(str+this.name);
                }
            },
            filters:
            {
                toUpper:function(str)
                {
                    if(!str) return ""
                    str=str.toString()
                    return str.charAt(0).toUpperCase()+str.slice(1);
                }

            }
        })
        myVue.name="andy and rose";
        student.age=19;
        
        function test(hi)
        {
            alert(hi);
        }
    </script>
</body>
</html>

志飞

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
(vue1)vue基础

现在很多前端项目都用vue这个js框架，应该说是很热门的一个框架了，本文通过代码学习vue的一些基础操作，后续再写相关实战内容。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" conte
复制链接

扫一扫

专栏目录