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>
相关推荐
wordbaby5 分钟前
Vue Query 实例解析:轻松掌握核心用法
前端
白杨木影子被拉长7 分钟前
前端命名规范总结
前端
叶小秋10 分钟前
每日前端小技巧 - 优雅处理请求重试
前端·javascript
1_2_3_12 分钟前
自定义颜色选择器的实现与应用(react-color,二次封装)
前端
旺代13 分钟前
JavaScript防抖与节流
前端
你不会困14 分钟前
什么?每天早上准时9点给你发送github项目推荐邮件
前端·javascript·nestjs
前端炼气期一层24 分钟前
git之我add错了代码怎么办呀!我commit错了怎么办呀!
前端·面试
Gauss松鼠会26 分钟前
GaussDB回调机制深度实践:从事件驱动到系统集成
开发语言·javascript·数据库·sql·gaussdb
curdcv_po27 分钟前
新手到老鸟😎🚀玩转 React Effect
前端·react.js