day2021-10-22(vue )

最新推荐文章于 2024-01-08 11:40:43 发布

TIM_Zhang1122

最新推荐文章于 2024-01-08 11:40:43 发布

阅读量45

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/TIM_Zhang1122/article/details/120953990

版权

2 vue入门

2.1 事件绑定

2.1.1 绑定事件

回顾 javascript

<input type="button" onclick="函数名"/>
<script>
	function 函数名() {
        
    }
</script>

vue 使用 v-on进行事件绑定

<input type="button" v-on:click="函数名"/>

<script>
	new Vue({
        el : ...,
        data : ...,
        methods : {
        	函数名() {},
    	}
    }) 
</script>

案例：给按钮绑定点击事件

<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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" v-on:click="show" value="点击">
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            show() {
                alert('哈哈，O割')
            },
        },
    })
</script>

2.1.2 绑定事件：省略写法

<!--标准写法-->
<input type="button" v-on:click="函数名"/>

<!--省略写法-->
<input type="button" @click="函数名"/>

案例：

<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>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" v-on:click="show" value="点击"> <br/>
        <input type="button" @click="show" value="点击-省略">
    </div>
</body>
</html>
<script>
    new Vue({
        el: '#app',
        data:{},
        methods: {
            show() {
                alert('哈哈，O割')
            },
        },
    })
</script>

2.2 生命周期函数

<script>
	new Vue({
        el:"#app",
        data: {
            
        },
        methods: {
            
        },
        created() {  //创建方法 -- 页面加载前执行
            
        },
        mounted() {	 //挂载 -- 页面加载前执行
            
        }
    })
</script>

总结：
1，vue相对来说还是比较简单的，非常好用，和后端的交互也是非常简单，明天些项目希望可以顺利

TIM_Zhang1122

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
day2021-10-22(vue )

2 vue入门2.1 事件绑定2.1.1 绑定事件回顾 javascript<input type="button" onclick="函数名"/><script> function 函数名() { }</script>vue 使用 v-on进行事件绑定<input type="button" v-on:click="函数名"/><script> new Vue({ el
复制链接

扫一扫