Vue---基本使用

左手的ㄟ右手 2022-12-02 12:21 147阅读 0赞

1：基本使用：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <script src="js/vue.js"></script>
    
        <title>Vue的基本使用</title>
    </head>
    <body>
        
        
        <div class="box">{
        {
        content}}</div>
    
        
        <script>
            var vm = new Vue({
        
                el:'.box',
                data:{
        
                    content:"Vue修改后的数据"
                }
    
            });
        </script>
    </body>
    </html>

2：修改属性：v-bind： 或者 直接 :

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vue.js"></script>
        <script>
            window.onload = function(){
        
                var vm = new Vue({
        
                    el : ".div1",
                    data:{
        
                        content : "操作数据",
                        url : "https://www.baidu.com",
                        linkdata : "百度链接"
                    }
                })
            };
        </script>
    
        <title>Document</title>
    </head>
    <body>
        <div class="div1">
            <a :href="url">{
        {
        linkdata}}</a>
            <p>{
        {
        content}}</p>
        </div>
    </body>
    </html>

3:调用方法：v-on: 或者 @

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vue.js"></script>
        <script>
            window.onload= function(){
        
                var vm = new Vue({
        
                    el: '.box',
                    data : {
        
                        content : "操作的数据",
                        linkdata:"百度链接",
                        url:'http://www.baidu.com',
                        count : 0
                    },
                    methods:{
        
                        fnAddClick:function(){
        
                            this.count += 1;
                        }
                    }
                })
            }
        </script>
        <title>Document</title>
    </head>
    <body>
        <div class = "box">
            <button @click = "fnAddClick"> 计时器:{
        {
        count}}</button>
            <a :href="url">{
        {
        linkdata}}</a>
            <p>{
        {
        content}}</p>
        </div>
    </body>
    </html>

4：条件渲染：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="js/vue.js"></script>
        <script>
            window.onload = function(){
        
                var vm = new Vue({
        
                    el : '.box',
                    data : {
        
                        flag : 2,
                        is_show:2,
                    }
                })
            }
        </script>
        <title>Document</title>
    </head>
    <body>
        <div class="box">
            <li v-if="flag==1">我是1111111</li>
            <li v-else-if="flag==2">我是2222222</li>
            <li v-else-if="flag==3">我是3333333</li>
            <li v-else-if="flag==4">我是4444444</li>
            <li v-else>我是5555555</li>
    
            <p v-show="is_show==2">显示展示</p>
            <p v-show="is_show==3">隐式展示</p>
        </div>
    
        
    </body>
    </html>

5：列表渲染：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>列表渲染</title>
        <script src="js/vue.js"></script>
        <script>
            window.onload = function(){
        
                var vm = new Vue({
        
                    el:".box",
                    data : {
        
                        // 1:普通列表
                        mylist:[1,2,3,4,5],
                        //2：对象列表
                        person:{
        
                            name : "小明",
                            age : 23,
                        },
                        //3:对象，列表套字典
                        persons :[
                            {
        
                                name : "任善文",
                                age : 23
                            },
                            {
        
                                name : "小贱贱",
                                age : 24
                            }
                        ]
                    }
                })
            }
        </script>
    </head>
    <body>
        <div class="box">
            
            <ul>
                <li v-for="item in mylist">{
        {
        item}}</li>
            </ul>
    
            <ul>
                <li v-for="(item,index) in mylist">{
        {
        item}}--{
        {
        index}}</li>
            </ul>
    
            
            <ul>
                <li v-for="(item,key) in person">{
        {
        key}}---{
        {
        item}}</li>
            </ul>
    
            
            <ul>
                <li v-for="item in persons">{
        {
        item.name}}---{
        {
        item.age}}</li>
            </ul>
        </div>
    </body>
    </html>