实例演示vue常用术语、样式与事件绑定、列表渲染

静态与动态页面

静态页面:纯静态

<h1>hello world</h1>

动态界面:模板化静态页面:动态数据

模板由2部分构成:

原样显示的字面量,字符串,html标签,样式
插值:一个变量/表达式的占位符

<h1 class="hello">{{message}}</h1>
<script>
// vue
const app = Vue.createApp({
    data() {
        return {
            message: 'Hello 123666',
        };
    },
}).mount('.hello');
</script>

挂载点,vue实例,数据注入,响应式

挂载点:当前vue实例的作用域

<div class="app">
    <p>用户名: {{ username }}</p>
    <p>会员等级: {{ rank }}</p>
</div>;

vue实例

const app = Vue.createApp(
    // vue实例配置对象,要写到一个{}
    {
        // vue中的变量/数据全部要写到一个data()
        data() {
            // 返回声明在vue实例上的所有变量
            return {
                username: '张老师',
                rank: '高级会员',
            };
        },
    }
).mount('.app');

数据注入

// 数据注入
console.log(app.username);
// 完整注入
console.log(app.$data.username);
// 数据注入就是利用访问器属性的方式进行穿透访问的
const obj = {
    $data: {
        email: '498668472@qq.com',
    },
    // 访问器属性
    get email() {
        return this.$data.email;
    },
};
console.log(obj.email);

响应式,vue实例中的数据,实时响应外部对数据的更新

app.username = '马老师';

v-html,v-text:内容填充

innerHTML -> vue: v-html

textContent -> vue: v-text

<div class="app">
    <!-- <p>用户名: {{username}}</p> -->
    <p>用户名: <span v-text="username"></span></p>
    <!-- 支持html样式 -->
    <p>用户名: <span v-html="username"></span></p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                username: '张老师',
            };
        },
    }).mount('.app');
    app.username = '<i style="color:red">猪老师</i>';
</script>

样式绑定,v-bind:属性

v-bind:属性,属性有:class,style等

<style>
    .active {
        color: cyan;
    }
</style>
<div class="app">
    <!-- 行内 -->
    <p style="color: red">hello world</p>
    <!-- 完整写法 v-bind:属性 -->
    <p v-bind:style="style">Hello php.cn</p>
    <!-- 语法塘进行简化: v-bind:属性  ==> :属性 -->
    <p :style="style">Hello php.cn</p>
    <!-- 多个用对象 -->
   <p :style="{color:mycolor, background: mybackground}">Hello php.cn</p>
    <!-- class: 类样式 -->
    <p class="active">大家晚上好</p>
    <p :class="active">大家吃了吗</p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                style: 'color:red',
                mycolor: 'blue',
                mybackground: 'yellow',
                active: 'active',
            };
        },
    }).mount('.app');
</script>

双向数据绑定

绑定方法1:v-on: 事件属性, v-on 可简化 @

<!-- 原本的v-on:input 点击输入框相应事件,简写成: @input -->
<input type="text" @input="comment = $event.target.value">

绑定方法2:用 v-model

<p>
    <input type="text" v-model="comment" :value="comment">
    <span>{{comment}}</span>
</p>
<!-- 延迟响应 .lazy: 失去焦点才响应 :value回显,把数据再回显到输入框中 -->
<p>
    <input type="text" v-model.lazy="comment" :value="comment">
    <span>{{comment}}</span>
</p>
<script>
    const app = Vue.createApp({
        data() {
            return {
                comment: ''
            }
        },
    }).mount('.app')
</script>

事件绑定与修饰符

v-on: @

event: $event

<div class="app">
    <a href="https://www.php.cn/" @click="showUrl($event)">显示网址:</a>
    <span class="url">{{url}}</span>
    <hr />
    <!-- 使用事件修饰符来限定事件行为 prevent禁用默认行为-->
    <a href="https://www.php.cn/" @click.prevent="this.url = $event.target.href;">显示网址:</a>
    <span class="url">{{url}}</span>
    <hr />
    <p onclick="alert('Hello')">
        <!-- .stop: 防止冒泡 -->
        <a href="https://www.php.cn/" @click.prevent.stop="this.url = $event.target.href;">显示网址:</a>
        <span class="url">{{url}}</span>
    </p>
</div>
<script>
    const app = Vue.createApp({
        data() {
            return {
                url: null,
            };
        },
        methods: {
            showUrl(ev) {
                // 禁用默认行为(js原生方法)
                ev.preventDefault();
                // 防止冒泡(js原生方法)
                ev.stopPropagation();
                // this: 当前vue实例
                this.url = ev.target.href;
            },
        },
    }).mount('.app');
</script>

列表渲染

v-for语法:<li v-for="(成员,下标) of 数组" :key="下标">{{下标}}=>{{成员}}</li>,标签可换,支持数组和对象

<body>
    <div class="app">
        <ul>
            <!-- v-for -> for-of for (value of arr) {...} -->
            <!-- :key: 必须要添加,diff算法,key必须保证唯一性 -->
            <!-- <li v-for="city of cities">{{city}}</li> -->
            <!-- index唯一 -->
            <li v-for="(city,index) of cities" :key="index">{{index}}=>{{city}}</li>
        </ul>
        <hr />
        <ul>
            <!-- :key来干扰 diff算法 -->
            <li v-for="(item, key) of user" :key="key">{{key}}=>{{item}}</li>
        </ul>
    </div>
    <script>
        const app = Vue.createApp({
            data() {
                return {
                    // array
                    cities: ['合肥', '苏州', '上海'],
                    // obj
                    user: {
                        name: '猪老师',
                        email: 'zls@qq.com',
                    },
                };
            },
        }).mount('.app');
    </script>
</body>

静态与动态页面

静态页面:纯静态

动态界面:模板化静态页面:动态数据

挂载点,vue实例,数据注入,响应式

挂载点:当前vue实例的作用域

vue实例

数据注入

响应式,vue实例中的数据,实时响应外部对数据的更新

v-html,v-text:内容填充

样式绑定,v-bind:属性

双向数据绑定

绑定方法1:v-on: 事件属性, v-on 可简化 @

绑定方法2:用 v-model

事件绑定与修饰符

列表渲染

相关文章