Vue 简单开始

最新推荐文章于 2024-05-16 10:35:31 发布

Alisa_wu666

最新推荐文章于 2024-05-16 10:35:31 发布

阅读量172

点赞数

文章标签： vue

本文链接：https://blog.csdn.net/Alisa_wu666/article/details/105706623

版权

复制在你的编辑器上，感受一下 Hello Vue

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue todo tutorial</title>
</head>
<body>
<div id="vm">{{ aa }}</div>
<!--双大括号为变量-->
</body>
<!--加上这句话，就引用了Vue-->
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
<!--注意Vue的V大写-->
    var vm=new Vue({
        /*id选择器选择div*/
        el:'#vm',
        data: function () {
            /*data 保存数据，在视图中申明了哪些变量，就需要在data中注册这些变量，并且为变量进行初始化的赋值*/
            return {aa: "hello vue"}
        }
    })
</script>
</html>

下面了解一下vue 的绑定 1. v-model 比如下面的<input type="text" v-model="zhi"> 意思是将每次input输入的值，都绑定在zhi这个变量上，zhi对象需要注册所以需要在data中写；

然后我们想在点击完成，就给个提示说，发送成功，然后输入框中的值清空。2.所以我们需要在send1 按钮上加上绑定按钮事件v-on:click 我看到很多地方都写相同的名字，导致我当时都不知道他这个变量代表什么了，所以我都写的不一样的变量以便分清楚，这个列子可以多些几次

<!DOCTYPE html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <input type="text" v-model="zhi">
    <input type="button" value="发送" v-on:click="send">
    <div>当前的值是{{zhi}}</div>
</div>
</body>
<script src="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script>
<script>
    var vm=new Vue({
        el:"#app",
        data:function(){
            return {zhi:''}
        },
        methods:{
            send:function(){
                alert('发送成功');
                 this.zhi=''
            }
        }
    })
</script>
</html>