1.vue常用术语

实例演示：挂载点，vue实例，数据注入，响应式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- 挂载点   VUE实例    数据注入  响应式 -->
    <!-- 挂载点 -->
    <div class="app">
    <p>你的名字:{{uesrname}}</p>
    </div>
</body>
<script>
    //vue实例
  const app = Vue.createApp({
      data() {
          return {
              uesrname:'朱老师',
          }
      },
  }).mount('.app');
//数据注入
console.log(app.$data.uesrname);
//响应式
app.uesrname='庆余年';
</script>
</html>

VUE常用指令

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <!-- v-html->innerHTML
         v-text->textContent
    -->
     <div class="app">
         <p>用户名:{{name}}</p>
         <!-- v-text 适用于添加文本 -->
         <p>用户名:<span v-text='username'></span></p>
         <!-- v-html 用于添加样式 -->
         <p>用户名:<span v-html='username'></span></p>
     </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                name:'欧阳',
                username:'朱老师'
            }
        },
    }).mount('.app')
    app.username='<i style="color:red">毛主席</i>'
</script>
</html>

VUE样式和事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<style>
    .active {
        background: greenyellow;
        color: white;
    }
</style>
<body>
    <!-- v-bind -->
    <div class="app">
        <!-- 行内样式 -->
        <!-- 原声 ES6 -->
        <p style="background: red;">我在学习js</p>
        <!-- vue 用v-bind -->
        <p v-bind:style="style">我在学习vue1</p>
        <!-- v-bind  简化 : -->
        <p :style="style">我在学习vue2</p>
        <!-- class 类样式 -->
        <!-- ES6 原生 -->
        <p class="active">朱老师你好</p>
        <!--  vue  用v-bind   简化 : -->
        <p :class="active">朱老师你好</p>
        <!-- 样式绑定 -->
        <!-- 
            v-on 简化 @
            event = $event
         -->
        <a href="https://www.baidu.com" @click="showUrl($event)">显示网址:</a>
        <span class="url">{{url}}</span>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                style: "background:yellow",
                active: 'active',
                url:''
            }
        },
        //创建一个属性
        methods: {
            showUrl(ev){
                //禁用a标签跳转的默认性行为
                ev.preventDefault();
                //把当前的a标签的href赋值给url
                //this 是指当前vue实例
                //ev.target指的是当前a标签
                this.url=ev.target.href
            }
        },
    }).mount('.app');
</script>
</html>

VUE列表渲染

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/vue@next"></script>
</head>
<body>
    <div class="app">
        <!-- 一个一个获取 -->
        <ul>
            <li>{{cities[0]}}</li>
            <li>{{cities[1]}}</li>
            <li>{{cities[2]}}</li>
        </ul>
        <!-- 使用v-for -> for   of for(value of  arr) -->
         <!-- ::key 必须要添加  diff算法 key 必须保证唯一性 -->
        <ul>
            <li  v-for="(value,index)  of cities" ::key="index">{{index}}=>{{value}}</li>
        </ul>
        <ul>
            <!-- :key来干扰diff算法 -->
            <li  v-for="(value,key) of user" ::key="key">{{key}}=>{{value}}</li>
        </ul>
    </div>
</body>
<script>
    const app = Vue.createApp({
        data() {
            return {
                cities: ['北京', '上海', '广州'],
                user:{
                    name: '张学良',
                    home: '东北',
                    email: 'zxl@qq.com'
                }
            }
        },
    }).mount('.app');
</script>
</html>

Correcting teacher：

PHPz

Correction status：qualified

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

图链接列表

2022-03-18 00:37:13