3、VUE的事件
绑定事件 在 vue 中，事件通过指令 v-on 进行绑定，v-on 缩写 @ <组件 v-on:事件名称="表达式" /> <组件 @事件名称="表达式" /> 组件的 methods 选项 在组件选项中，提供了一个 methods 选项，用来存放组件中使用的函数方法，且存放在 methods 中的函数方法可以通过组件实例（this）进行访问 let app = new Vue({ el: '#app', methods: { fn() { console.log(123); } }, }); 通过内联方式绑定事件处理函数 直接调用函数，不传递参数 <button v-on:click="fn">开课吧</button> 此种情况在methods中接受的第一个参数为事件对象。 methods: { fn(e) { console.log(e); } & ...
2、VUE指令的使用
内容输出 大胡子语句 通过 大胡子语句 我们可以很方便的中模板中输出数据，但是这种方式会有一个问题，当页面加载渲染比较慢的时候，页面中会出现 大胡子语句 ，vue 提供了几个指令来解决这个问题 指令中的表达式不需要使用 大胡子语句 v-text <p v-text="title"></p> 弊端：v-text 会填充整个 innerHTML v-cloak <p v-cloak>{{title}}</p> 需要配合 css 进行处理 <style> [v-cloak] { display: none; } </style> v-html 为了防止 xss 攻击，默认情况下输出是不会作为 html 解析的，通过 v-html 可以让内容作为 html 进行解析 v-once 只渲染元素和组件一次，后期的更新不再渲染 v-pre 忽略这个元素和它子元素内容的编译 <!DOCTYPE html> <html lang="en"> <head> ...
1、VUE的基础使用
vue的引用 通过script标签的方式进行引用。 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> 组件 vue 的核心功能之一就是组件 组件基本分类 根组件 可复用的功能组件 根组件的创建 通过 vue 提供的构造函数可以实例化出来一个跟组件实例对象 let app = new Vue(options); 应用最顶层的组件，一般情况下，一个独立的应用有且只有一个根组件（节点） <!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="./js/vue.js"></script> </head> & ...
