1.介绍描述1.1渐进式 JavaScript 框架 1.2作者: 尤雨溪(一位华裔前 Google 工程师) 1.3作用: 动态构建用户界面 2.Vue 的特点2.1遵循 MVVM 模式 声明式开发：vue命令式开发：jq2.2编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发 2.3它本身只关注 UI, 可以轻松引入 vue 插件或其它第三库开发项目 3.与其它前端 JS 框
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>08_表单输入绑定</title></head><body><div id="demo"> <form action="/XXXX" @submit.prevent="handleSubmit"> <.
1.模板的理解1) 动态的 html 页面 2) 包含了一些 JS 语法代码 a. 双大括号表达式 b. 指令(以 v-开头的自定义标签属性)2. 双大括号表达式 语法: {{exp}} 或 {{{exp}}} 功能: 向页面输出数据，可以调用对象的方法3. 指令一: 强制数据绑定功能: 指定变化的属性值 完整写法: v-bind:xxx='yyy' //yyy会作为表达式解析执行 简洁写法: :xxx='yyy'4. 指令二: 绑定事件监听...
1.计算属性在computed属性对象中定义计算属性的方法在页面中使用{{方法名}}来显示计算的结果//什么时候执行：初始显示或者相关data属性数据发生改变//计算属性中的一个方法：方法的返回值作为属性值computed:{ fullName1() { console.log('fullName1()',this) return this.firstName+'-'+this.lastName;}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>07事件处理</title></head><body><div id="example"> <h1>1.绑定监听</h1> <button v-on:click="test1">test1.
1.列表过滤<div id="test"> <input type="text" v-model="searchName"> <ul> <li v-for="(p,index) in filterPersons" :key="index"> {{index}}----{{p.name}}----{{p.age}} </li> </ul></di
1. 理解在应用界面中, 某个(些)元素的样式是变化的class/style绑定就是专门用来实现动态样式效果的技术2.class绑定: :class='xxx'2.1xxx是字符串<h2>1. class 绑定: :class='****'</h2><!--a是一个变量--><p :class="a">XXX是字符串</p><!--合并的效果--><p class="classC" :class.
1. 理解过滤器功能: 对要显示的数据进行特定格式化后再显示注意: 并没有改变原本的数据, 可是产生新的对应的数据2. 编码1). 定义过滤器 Vue.filter(filterName, function(value[,arg1,arg2,...]){ // 进行一定的数据处理 return newValue })2). 使用过滤器 <div>{{myData | filterName}}</div> <div>{{m
1.常用内置指令v:text : 更新元素的 textContentv-html : 更新元素的 innerHTMLv-if : 如果为true, 当前标签才会输出到页面v-else: 如果为false, 当前标签才会输出到页面v-show : 通过控制display样式来控制显示/隐藏v-for : 遍历数组/对象v-on : 绑定事件监听, 一般简写为@v-bind : 强制绑定解析表达式, 可以省略v-bindv-model : 双向数据绑定ref : 为某个元素注册一个唯一标
1. vue动画的理解操作css的trasition或animationvue会给目标元素添加/移除特定的class2. 基本过渡动画的编码1). 在目标元素外包裹<transition name="xxx">2). 定义class样式 1>. 指定过渡样式: transition 2>. 指定隐藏时的样式: opacity/其它<style> .move-enter-active { transition: all
一，vue生命周期图vue对象的生命周期 1). 初始化显示 * beforeCreate() * created() * beforeMount() * mounted() 2). 更新状态 * beforeUpdate() * updated() 3). 销毁vue实例: vm.$destory() * beforeDestory() *
1.打包 : npm run build2.发布 1: 使用静态服务器工具包npm install -g serve serve dist 访问: http://localhost:50003.发布 2: 使用动态 web 服务器(tomcat)修改配置: webpack.prod.conf.js output: { publicPath:
1.定义插件（初学者使用比较少）(function (window) { //向外暴露的插件对象 const MyPlugin = {} MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { console.log('Vue函数对象的
1.说明 1) vue-cli 是 vue 官方提供的脚手架工具 2) github: https://github.com/vuejs/vue-cli 3) 作用 : 从 https://github.com/vuejs-templates 下载模板项目 2.创建 vue 项目 npm install -g vue-cli （安装
Copyright © 2005-2025 51CTO.COM 版权所有 京ICP证060544号
