当前位置：首页>前端>正文

vs 开发 vue项目里怎么使用es6 vs2019 vue教程

前端2024-06-19 15:30:10

VUe基础

1.用vs2019，创建空项目，然后右键，添加项，选择html；写html双击table快捷键，会自动开发弹出html通用模板：

2.将写好的html文件，右键单击，然后选择在浏览器中查看，就可以看到编译后的结果：

3.使用vue，要在第一行引用vue， <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 其他的具体基本应用见代码

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Vue基础</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id="#app" class="app">
        {{message}}  <!--两个大括号,两个大（）里面的东西，就会被message所替代-->
        <h2>{{school.name}}{{school.mobile}}</h2>
        <ul>
            <li>{{campus[0]}}</li>  <!--数组里面的第一个元素是0-->
            <li>{{campus[1]}}</li>
            <li>{{campus[2]}}</li>
            <li>{{campus[3]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
          //  el: "#app",    /*css文件里面#是Id的表示*/ 一般都是建议使用ID选择器
           // el:".app",  //lacss选择器的关键字是.
            el:"div", //标签选择器；
            data: {
                message: "你好，小黑!",
                school:
                {
                    name: "黑马程序员",
                    mobile:"848481818"
                },
                campus: ["北京校区","上海校区","广州校区","深圳校区"]
            }
        })
    </script>
</body>
</html>

（二）具体的Vue这么用

vue里面封装了很多很有用的指令，一般都是以 V- 来开头的，下边是主要用到的几个：

v-text：主要是设置文本。。v-text可以实现插入使用，具体实现算法看下边图片，注意使用拼接的时候，应该如何进行拼接

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>V-text指令</title>
</head>
<body>
    <div id="app">
        <h2 v-text="message+'$$$加上的'">深圳</h2>
        <h3 v-text="info">深圳</h3>
        <h3>{{message}}####深圳</h3>  
    
    <!--想要使用插入类型的，就必须要用两个大括号的形式-->

    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:
            {
                message: "黑马程序员",
                info:"前端与移动教研室"
            }
        })
    </script>  
</body>
</html>

实际效果图

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vs 开发 vue项目里怎么使用es6,第1张

2.V-html标签当内容是文本的时候，他和v-text的作用一样，这个是当文本中出现的是html格式的时候，他会生成链接的格式，而 v-text 无论结果是什么，他都只会解析为文本。

<body>
    <div id="app">
        <p v-text="content"></p>
        <p v-html="content"></p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data:
            {
                content: "<a href='https://www.baidu.com/'>百度链接</a>"
                //外边用了双引号，里面就只能用单引号了
            }
        })
    </script>  
</body>
</html>

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vs 开发 vue项目里怎么使用es6_02,第2张

3. V-on 这个是主要用于绑定事件用的，常用的是单击，双击，鼠标移动事件，具体实现代码如下：

<body>
    <div id="app">
        <input type="button" name="name" value="v-on 指令" v-on:click="doIt" /><br>
        <input type="button" name="name" value="v-on 简写" @click="doIt" /><br>
        <input type="button" name="name" value="双击事件" v-on:dblclick="doIt" /><br />
        <h2 @click="changeFood">{{food}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                food:"西兰花炒饭"
            },
            methods:
            {
                doIt: function () {
                    alert("做it");
                },
                changeFood: function (){
                    this.food+="好好吃哦！"
                }
            }
        })
    </script>
</body>

效果图如下：每次点击 “西兰花” 这几个字，都会出现好好吃。

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vue.js_03,第3张

4.用 Vue 来实现一个简单的计数器功能；最终效果图如下：（点击左边的数量 - ，点击右边的数量 + ），注意：在浏览器中，右键点击检测，然后选择 console 选项，就可以看到执行过的命令了，效果见图二

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vs 开发 vue项目里怎么使用es6_04,第4张

图二

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_Vue_05,第5张

实现代码如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>计数器</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <div class="input-num">
            <button @click="sub">
                -
            </button>
            <span>{{num}}</span>
            <button @click="add">
                +
            </button>
        </div>

    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: { num:1 },
            methods:
            {
                add: function () {
                    console.log("add");
                    if (this.num < 10) {
                        this.num++;
                    }
                    else {
                        alert("别点了，已经是最大了");
                    }},

                sub: function () {
                    console.log("sub");
                    if (this.num >0) {
                        this.num--;
                    }
                    else {
                        alert("别点了，已经到底了");
                    }
                } }})
    </script>

</body>
</html>

5.V-show的功能主要是用于控制图片的隐藏或显示：具体操作是点击切换按钮，可以实现图片的隐藏或者显示：
实现代码如下

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>美景图</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="button"   value="切换显示的状态" @click="changeIshow" />
        <img v-show="isShow" src="https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592299228&di=1cdbca2b1805ab962a5a0b619b040de1&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg" alt="" />
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods: {
                changeIshow: function () {
                    this.isShow = !this.isShow;
           }}})
    </script>
</body>
</html>

实现后的效果图如下：

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_Vue_06,第6张

6.V-if 指令：和其他语言的if差不多，可是实现某一参数 true 和 false 选择的切换，具体示例代码实现如下：

<body>
    <div id="app">
        <input type="button"    name="name" value="切换显示" @click="toggleIsShow"/>
        <p v-if="isShow">黑马程序</p>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                isShow: false
            },
            methods:
            {
                toggleIsShow: function () { this.isShow = !this.isShow; }
            } })      
    </script>
</body>

效果图：通过动态点击切换显示，可以实现黑马程序这几个字的出现和消失；

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vs 开发 vue项目里怎么使用es6_07,第7张

7.V-bind（bind绑定）是用来绑定属性的：具体代码和效果图如下：

<body>
    <div id="app">
        <!-- alt标签是当图片无法正常显示的时候，用来显示的文字 -->
        <img v-bind:src="imgSrc"  alt="" /> 
        <br />
        <img v-bind:src="imgSrc" alt="" :title="imgTitle+'!!!!'" />
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                imgSrc: "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2446973552,1830588776&fm=26&gp=0.jpg",
                imgTitle:"黑马程序员",
            }
        })
    </script>
</body>

效果图：

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_Vue_08,第8张

7.Vue-for指令，和其他语法的for指令含义差不多，具体代码和效果如下：

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Vue测试</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="(it,index) in arr">{{index+1}}黑马程序员校区：{{it}}</li>
        </ul>
        <br />
        <h2 v-for="item in vegetables" v-bind:title="item.name">{{item.name}}</h2>
        <input type="button" name="name" value="添加数据" @click="add" />
        <input type="button" name="name" value="删除数据" @click="remove" />
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                arr: ["北京", "上海", "广东"],
                vegetables: [
                    {name:"西兰花炒饭"},
                    {name:"爆炒茄汁"}
                ]
            },
            methods: {
                add: function () {
                    this.vegetables.push({ name: "正新鸡排" });
                },
                remove: function () {
                    this.vegetables.shift();
                },
            }
        })

    </script>
</body>
</html>

效果图如下：

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vue.js_09,第9张

8.Vue的事件修饰符，补充 V-on 注意用 . 修饰符可以对事件进行限制。例如用.enter只有在点击回车键的时候才会触发；

<body>
    <div id="app">
        <input type="button" name="name" value="点击" @click="doIt(6666,'老铁')" />
        <input type="text" @keyup.enter="sayHi" />  
        <!-- key。enter只有在敲击回车键的时候，才会触发SayHi函数 -->
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            methods: {
                doIt: function (p1, p2) {
                    console.log("do it");
                    console.log(p1);
                    console.log(p2);
                },
                sayHi: function () { alert("吃了没有"); }
            }
        })
    </script>
</body>

实际效果图如下所示：

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_vue.js_10,第10张

9 .V-model 进行关联

具体代码如下

<body>
    <div id="app">
        <input type="button" name="name" value="修改message" @click="setM" />
        <input type="text"  v-model="message" @keyup.enter="getM" />
        <h2>{{message}}</h2>
    </div>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                message:"黑马程序员"
            },
            methods: {
                getM: function () {
                    alert(this.message);
                },
                setM: function () {
                    this.message = "酷丁鱼";
                }
            }
        })
    </script>
</body>

最后的效果图：

vs 开发 vue项目里怎么使用es6 vs2019 vue教程,vs 开发 vue项目里怎么使用es6 vs2019 vue教程_Vue_11,第11张

参考文献

黑马程序员感觉侵权。联系侵删

查看全文

https://www.xamrdz.com/web/2w81964506.html

VUe基础

（二）具体的Vue这么用

图二

参考文献

相关文章：