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>