VUE 基础(一)

(直接在vscode上运行就可以,建一个html文件)

1 el的使用

Vue会管理el选项命中的元素及其内部的后代元素

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    {{message}}
    <div id="app">
        {{message}}
    </div>
       //导入环境开发版本
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app", //与id=app相对应
            data:{
                message:"黑啊吗"
            }
        })
    </script>
</body>
</html>

只在作用范围内有效果,外面的message不受影响 当然除了id选择器也可以选择使用其他选择器(建议使用id选择器)

注:不能使用在html和body上,不会产生任何效果

2 data:用于存储多种数据类型,用于调取

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{message}}
        <h2>{{school}}</h2>  //获取全部元素
        <h2>{{school.name}}</h2>  //获取部分元素
        <ul>
            <li>{{campus}} </li> //获取数组
            <li>{{campus[0]}} </li>  //获取部分
        </ul>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
                message:"黑啊吗",
                school:{
                    name:"黑马",
                    tel:"154545",

                },
                campus:["背景","图片"]
                
            }
        })
    </script>
</body>
</html>

3 v-text:设置标签的文本值

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2 >深圳{{message+"!"}} </h2>
        <h2 v-text="message+'!'"></h2>
        <h2 v-text="message+info"></h2>
    </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>

使用数据格式是 v-text=" " 引号里面添加引用的数据的名称,如果直接使用v-text的话 标签的内容会全部被替换 所以常用第二种方法 +用来拼接前后的内容,同时也可以用+拼接数据

4 v-html:设置标签的innerHTML

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
      <p v-html="content"></p>
      <p v-html="content1"></p>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            data:{
              content:"黑马程序员",
              content1:"<a href=http://www.baidu.com>黑马程序员</a>"
            }
        })
    </script>
</body>
</html>

v-html与v-text:如果只是单纯文本框内容使用v-text 如果需要进行渲染则使用v-html

5 v-on:为元素绑定事件

格式: v-on:事件名="方法"(可以将v-on:变换成@)

绑定的方法放在methods中

具体事件的详细总结可以看: Vue 中常用的事件总结( 事件的概念 +事件要素+事件修饰符)_vue 事件-CSDN博客

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
     
      <input type="button" value="v-on指令" @click="doIt">  //简写方式
      <input type="button" value="v-on指令" v-on:click="doIt">  //一般方式
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        var app=new Vue({
            el:"#app",
            methods: {
                doIt:function(){
                    alert("1111")
                }
            },
        })
    </script>
</body>
</html>
相关推荐
10年前端老司机2 小时前
React无限级菜单:一个项目带你突破技术瓶颈
前端·javascript·react.js
阿芯爱编程6 小时前
2025前端面试题
前端·面试
前端小趴菜057 小时前
React - createPortal
前端·vue.js·react.js
晓13138 小时前
JavaScript加强篇——第四章 日期对象与DOM节点(基础)
开发语言·前端·javascript
菜包eo8 小时前
如何设置直播间的观看门槛,让直播间安全有效地运行?
前端·安全·音视频
烛阴8 小时前
JavaScript函数参数完全指南:从基础到高级技巧,一网打尽!
前端·javascript
chao_7899 小时前
frame 与新窗口切换操作【selenium 】
前端·javascript·css·selenium·测试工具·自动化·html
天蓝色的鱼鱼10 小时前
从零实现浏览器摄像头控制与视频录制:基于原生 JavaScript 的完整指南
前端·javascript
三原10 小时前
7000块帮朋友做了2个小程序加一个后台管理系统,值不值?
前端·vue.js·微信小程序
popoxf10 小时前
在新版本的微信开发者工具中使用npm包
前端·npm·node.js