vue《一》（v-for,v-model,v-on:click指令学习）

最新推荐文章于 2024-03-07 16:49:21 发布

键盘哥

最新推荐文章于 2024-03-07 16:49:21 发布

阅读量757

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/Gaowahaha/article/details/81053804

版权

vue学习笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

一，第一部分

基本模型：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#test',//挂载点
                data:{
                    msg:'Hello Vue!'
                }
            });            
        }
    </script>
</head>
<body>
<div id="test">
    {{msg}}
</div>
</body>
</html>

基本就是new一个Vue实例，实例化的时候传入了一个对象{el:'#test',data:{msg:'Hello Vue!'}}。

这个意思是：Vue这个只控制id="text"这个DIV元素(挂载点)，同时在 HTML模板上使用双花括号{{xxxx}}语法，来访问data中定义的数据。

2v-model指令（双向绑定数据）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm2 = new Vue({
                el:'#test2',//挂载点
                data:{
                    msg:'Hello Vue!',
                    arr:['Java','Python','C++','PHP'],
                    json:{a:'Mybatis',b:'Hibernate'}
                }
            });
        }
    </script>
</head>
<body>

<div id="test2">
    <input type="text" v-model="msg"/><br/>
    {{msg}}
    <hr>
</div>
</body>
</html>

通过v-model 指令，我们把msg 数据绑定到了input文本框，我们修改文本框的值，发现msg 数据改变了。

3 v-for指令：用于循环遍历输出数据

首先上效果图：

具体代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){           
            var vm2 = new Vue({
                el:'#test2',//挂载点
                data:{
                    msg:'Hello Vue!',
                    arr:['Java','Python','C++','PHP'],
                    json:{a:'Mybatis',b:'Hibernate'}
                }
            });
        }
    </script>
</head>
<body>
<div id="test2">

    <p>循环数组</p>
    <ul>
        <li v-for="a in arr">
            {{a}}
        </li>
    </ul>
    <p>循环出数组索引</p>
    <ul>
        <li v-for="(v,k) in arr">
           序列： {{k}}值：{{v}}
    </ul>
    <hr>
    {{json}}
    <p>循环json</p>
    <ul>
        <li v-for="item in json">{{item}}</li>
    </ul>
    <p>循环json的键</p>
    <ul>
        <li v-for="(k,v) in json">
            {{k}}--------{{v}}
        </li>
    </ul>
</div>
</body>
</html>

页面数据：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){
            var vm = new Vue({
                el:'#test',//挂载点
                data:{
                    msg:'Hello Vue!'
                }
            });
            console.log(vm.msg);
            var vm2 = new Vue({
                el:'#test2',//挂载点
                data:{
                    msg:'Hello Vue!',
                    arr:['Java','Python','C++','PHP'],
                    json:{a:'Mybatis',b:'Hibernate'}
                }
            });
        }
    </script>
</head>
<body>
<div id="test">
    {{msg}}
</div>
<div id="test2">
    <input type="text" v-model="msg"/><br/>
    {{msg}}
    <hr>
    {{arr}}
    <p>循环数组</p>
    <ul>
        <li v-for="a in arr">
            {{a}}
        </li>
    </ul>
    <p>循环出数组索引</p>
    <ul>
        <li v-for="(v,k) in arr">
           序列： {{k}}值：{{v}}
    </ul>
    <hr>
    {{json}}
    <p>循环json</p>
    <ul>
        <li v-for="item in json">{{item}}</li>
    </ul>
    <p>循环json的键</p>
    <ul>
        <li v-for="(k,v) in json">
            {{k}}--------{{v}}
        </li>
    </ul>
</div>
</body>
</html>

二，第二部分

v-on:click指令

1.点击按钮弹出“测试”

效果图：

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for，v-on:click指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){            
            var vm3= new Vue({
                el:'#test3',
                methods:{
                    show:function(){
                        alert('测试');
                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="test3">
  <input type="button" value="点击" v-on:click="show()">//click后跟方法名称
</div>
</body>
</html>

2.点击“添加”，在原有的无序列表后追加“springBOOT”

代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>v-mode和v-for，v-on:click指令练习</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script type="text/javascript">
        window.onload = function(){    
            var vm3= new Vue({
                el:'#test3',
                data:{
                    arr:['spring','springMVC','Mybatis']
                },

                methods:{
                    show:function(){
                        alert('测试');
                    },
                    add:function () {
                        this.arr.push("springBOOT");

                    }
                }
            });
        }
    </script>
</head>
<body>
<div id="test3">
    <ul>
        <li v-for="val in arr">{{val}}</li>
    </ul>
  <input type="button" value="点击" v-on:click="show()">
    <input type="button" value="添加" v-on:click="add()">
</div>
</body>
</html>

除了click单击事件，还有mouseover，mouseover等鼠标事件。 dbclick双击事件。

v-on:click/mouseover/mouseover/mousedown/dbclick/...

键盘哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue《一》（v-for,v-model,v-on:click指令学习）

一，第一部分基本模型：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v-mode和v-for指令练习&lt;/title&gt; &lt;script src="https://c
复制链接

扫一扫