1. VUE简介绍

HTML

<!-- 创建一个vue根节点(其内所有内容都可以用vue实例进行管理) -->
<div class="app">
<!-- 插值（数据占位符），比如{{username}} -->
    <p>用户名: {{username}}</p>
    <p>{{username + ', php.cn讲师'}}</p>
    <p>10 + 30 = {{ 10 + 30}}</p>
    <p>{{flag ? '上午好' : '睡觉了'}}</p>
</div>

VUE

首先别忘了引入库

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//声明vue的作用域
const vm = new Vue({
    //挂载点(可简写为`el:'.app'`)
    el: document.querySelector('.app'),
    //数据注入；在data中声明的所有变量都自动成为vue实例的属性
    data: {
        username: 'Jy',
    }
})
//外部访问可以用以下方式
vm.username = 'Jy2';

2.VUE常用指令

innerText/textContent" class="reference-link">2.1 v-text: 专门由vue实例管理的自定义属性；等同于innerText/textContent

//会将vue中username的数据渲染到`p`标签中
<p v-text="username"></p>

2.2 v-once

//效果等同`v-text`,不过只渲染一次
<p v-once="username"></p>

2.3 v-html，等同于innerHTML

//例如下面是vue中data的数据，向p标签中渲染时，样式也会有，下面的p标签中Jy3的字体颜色将是红色
username = '<em style="color:red">Jy3</em>';
<p v-html="username"></p>

style和class属性；高频指令，可简写为:" class="reference-link">2.4 v-bind:绑定style和class属性；高频指令，可简写为:

//其中style1在data中为`color:red`；执行时p标签内颜色为红色
<p v-bind:style="style1">style样式</p>
//简写为
<p :style="style1">style样式</p>
//设置类名
<p :class="class1">class类</p>

@" class="reference-link">2.5 v-on:绑定事件,高频指令，可简写为@

VUE

const vm = new Vue({
    el: '.app',
    data: {
        site: 'php中文网',
    },
    methods: {
        show() {
            // this: 就是当前的vue实例对象
            alert(this.site)
        },
        handle(ev, a, b) {
            console.log(ev.type, ev.target);
            console.log("%d + %d = %d", a, b, (a + b));
        }
    },
})

2.5.1

//点击将会执行`show`方法
<p> v-on:click="show">显示网站名称</p>

2.5.2 prevent:事件修饰符,阻止元素的默认行为

<p><a href="https://php.cn" @click.prevent="show">显示网站名称2</a></p>

2.5.3 stop:阻止冒泡

<p><a href="https://php.cn" @click.prevent.stop="show">显示网站名称2</a></p>

2.5.4 once:仅允许执行一次

<p><a href="https://php.cn" @click.prevent.stop.once="show">显示网站名称2</a></p>

2.5.5 事件方法的传参(事件对象的参数名必须是 $event)

<button @click.stop="handle($event, 100, 200)">click</button>

2.6 v-model:双向绑定

//vue的data中`site:`,下面输入框内的数据和site的数据双向绑定，修改其一另外一个也跟着修改
 //v-mode="site",等同于 @input="site=$event.target.value"
 <p>双向绑定: <input type="text" v-model="site"></p>
 //只有在输入框失去焦点或者按下回车键才会执行
 <p>双向绑定: <input type="text" v-model.lazy="site"></p>

2.7 v-for：循环

HTML

 <div class="app">
        <!-- key: 可以干预diff算法 -->
        <!-- vue通过稳定且唯一的key值判断这个节点是否需要重新渲染, 以提升效率 -->
        <!-- key只能是整数或不重复的字符串 -->
        <!-- item为数组中的值，index为其键（key） -->
        <ul>
            <li v-for="(item,index) in items" :key="index">{{index}}--{{item}}</li>
        </ul>
        <!-- item为属性的值，prop为其键（key），index为属性的名称 -->
        <ul>
            <li v-for="(item,prop,index) in user" :key="prop">{{prop}}--{{index}}--{{item}}</li>
        </ul>
        <!-- item为数组中的对象 其键（key）最后使用对象的id ,index为对象在数组中的键 -->
        <ul>
            <li v-for=" (user, index) in users" :key="user.id">{{user.id}}--{{user.name}}--{{user.email}}</li>
        </ul>
    </div>

VUE

const vm = new Vue({
            el: ".app",
            data: {
                // 数组
                items: ["山东", "江苏", "上海"],
                // 对象
                user: {
                    name: "Jy",
                    email: "Jy@php.cn",
                },
                //   对象数组
                users: [
                    { id: 1, name: "Jy1", email: "Jy1@php.cn" },
                    { id: 2, name: "Jy2", email: "Jy2@php.cn" },
                    { id: 3, name: "Jy3", email: "Jy3@php.cn" },
                ],
            },
        });

更多相关文章

1. Google Guice之绑定方式
2. SpringBoot 配置文件绑定到 javabean
3. Vue.js基础入门系列（二）数据绑定
4. 点云处理库pclpy安装
5. IP地址分类及网络配置方法和多网卡绑定技术应用
6. vue基础知识 指令
7. 绑定服务
8. 第8章 0203-静态绑定，接口与抽象类，学习心得、笔记（抽象类、继承、
9. 1216CSS优先级

随机推荐

1. Android数据存储---数据备份（Data Backup）（
2. Android中自定义drawable states
3. 【Android开发学习01】与Android实体设备
4. Android歌词秀设计思路（6）运用Proxy设计模
5. android uiautomator自己主动化測试
6. 【Android studio】 新建项目后报错：Could
7. Android自己主动化測试解决方式
8. android之socket编程实例
9. Android的FrameLayout布局介绍
10. Linux通过shell脚本实现JDK版本之间的快