vue简单基础

最新推荐文章于 2023-05-17 19:46:30 发布

m0_59813955

最新推荐文章于 2023-05-17 19:46:30 发布

阅读量131

点赞数

本文链接：https://blog.csdn.net/m0_59813955/article/details/118436171

版权

引入vue 新建vue对象绑定作用范围 {{}} 取值

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <asd></asd>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/aaa.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

</html

单向绑定v-bind：（放在标签属性代码块的值绑定vue的值 vue动代码块动）


<body>
    <div id="app">
            <h1 v-bind:title="message">{{cont}}</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                cont:"我是标题",
                message:"页面加载于"
            }
        })
    </script>
</body>

2双向绑定 v-model="vue值 "（放在标签内相当于一个属性双向都动）

!--v-bind:单项绑定，从data》》》》bind   使用在标签中 bind加在标签属性前 <input type="text" v-bind:value="context1.aaa" ></input>
    v-model双向绑定，data《》《》《》bind   使用在标签中  v-model="data属性" <input type="text" v-model="context1.aaa" ></input>
-->
<body>
    <div id="app">
            <input type="text" v-model="context1.aaa" ></input>
            <input type="text" v-bind:value="context1.aaa" ></input>
            {{context1.aaa}}
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                context1:{
                    aaa:"bbb"
                }
            }
        })
    </script>
</body>

条件指令 v-if=" " v-else （相当于标签后跟值）

<body>
    <div id="app">
            <input type="checkbox" v-model="ok">是否同意</input>
            <h1 v-if="ok">正</h1>
            <h1 v-else="ok">负</h1>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                ok:false
            }
        })
    </script>
</body>

循环指令v-for="(变量名，索引) in vue值 " （）user相当去集合 ul无序列表 ol有序列表
li 行
<table>表格 <tr>行 <td> 每个单元格


<body>
    <div id="app">
        <ul>
            <li v-for="n in 10">{{n}}</li>
        </ul>

        <ol>
            <li v-for="(n,index) in 10">{{n}}========{{index}}</li>
        </ol>

        <table border="1">
            <tr v-for="e in user">
                <td>{{e.id}}</td>,
                <td>{{e.name}}</td>

            </tr>
        </table>


    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                user:[
                    {id:1,name:"张三"},
                    {id:2,name:"张三"},
                    {id:3,name:"张三"}
                ]
            }
        })
    </script>
</body>

事件的绑定 v-on：事件="vue方法名" （代码段中的事件绑定vue中的方法）

<body>
    <div id="app">
        <button v-on:click="surch">查询</button>

    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            methods:{
                surch(){
                    console.log("asd")
                }
            }
        })
    </script>
</body>

组件（组件名必须字符）

<body>
    <div id="app">
<aa></aa>
    </div>
    <script src="vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            },
            components:{
                    'aa':{
                     template:"<ul><li>首页</li><li>管理</li></ul>"
                    }
                }
        })
    </script>
</body>

自定义组件
创建js文件将组件代码用js代码写入

Vue.component("asd",
{template:"<ul><li>首页</li><li>管理</li></ul>"

})

使用时先引入js文件使用对应标签即可

<body>
    <div id="app">
        <asd></asd>
    </div>
    <script src="vue.min.js"></script>
    <script src="components/aaa.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                
            }
        })
    </script>
</body>

生命周期
created（）页面渲染之前完成（并列于data el）

<body>
    <div id="app">
        <table>
            <tr v-for="user in getUser">
                <td>{{user.name}}</td>
                <td>{{user.age}}</td>
            </tr>
        </table>
    </div>
    <script src="vue.min.js"></script>
    <script src="axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
                getUser:[]
            },
            created(){//在页面加载前提前渲染（调用）
                this.getUserlist()
            },
            methods:{//具体的方法
                //创建一个查询全部的方法
                getUserlist(){
                     //定义axios。请求方式（路径名称）。then(箭头函数)。catch(箭头函数)
                   axios.get("date.json")
                      .then(response =>//请求成功，response 任意一个变量(四级目录网络/date/属性/数组)
                        
                        this.getUser=response.data.cros.itme,
                        //console.log(response)
                        )                         
                      .catch(error =>{})
                }
            }
        })
    </script>
</body>

mounted（）面渲染之后完成

m0_59813955

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue简单基础

引入vue 新建vue对象绑定作用范围 {{}} 取值<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" conte...
复制链接

扫一扫