vue基本指令笔记
vue基本指令笔记
了解vue框架
- 渐进式框架
- 作用:简化原生dom操作、事件绑定,vue使我们只需要关注数据变化
- 不支持IE8以下
- 略
第一部分: 基本指令
-
v-text
-
v-html
-
v-show:添加display:none;属性
-
v-if:是否渲染当前dom节点
-
v-else
-
v-else-if
-
v-for:
<!-- 遍历数组 --> <li v-for="(velue,index) in arr">{{item}}</li> <!-- 遍历对象 --> <li v-for="(velue,key,index) in arr">{{item}}</li>
-
v-on
1)v-on:事件=”函数“
2)v-on="{事件:函数}"
-
简写:如@click=""
- v-on="{click:onclick,mouseenter:ondeg}" 绑定多个事件
- 键盘事件:@keyup.13或@keyup.enter
- @submit.stop.prevent 阻止事件冒泡
-
v-bind
1)v-bind:属性=“变量”
2)简写 :属性=""
2)用布尔值动态绑定class:@class="{类名:布尔,类名:布尔}"
3)用数组:[“clacc1”,“clacc2”]
-
v-model:对应input里的value
-
v-pre:表示这是静态的内容,不需要动态绑定数据
-
v-cloak:解决网络加载js导致的屏幕闪动
-
事件.once:事件只触发一次
-
{{var}}:插值符号
*注:*反引号``被识别为字符串,里边${var}表示变量,指令(标签属性)的值被解析为Vue的变量
第二部分: vue的动态绑定
- 调用Vue构造函数
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script> new Vue({ });
-
el属性:类似于querySelector()
-
data属性:放绑定数据,只认地址,地址变了视图才会刷新文档:如果在实例创建之后添加新的属性到实例上,它不会触发视图更新
-
watch:数据监听
-
methods:专门存放事件(注意是method+s)
-
filters:存放数据处理的方法
{{value | func}} new Vue({ filters:{ func:(value)=>{ //处理数据 return value; } } });
-
computed: 数据处理
-
component:局部组件
new Vue({ component:{ nav:{ template:``, data:0 } } })
-
template:选项模板
第三部分: 全局API
Vue原型对象上的方法,组件注册
-
$set(数组/对象,index/键,值):更改绑定的数据,刷新视图,还可以增加属性
-
delete : 删除对象或数组属性,如果对象是响应式,删除可触发试图更新
-
directive:添加自定义指令,例:
Vue.directive("hello",function(el,binding,vnode){ el.style["color"]= binding.value; })
-
Vue.component():注册全局组件
Vue.component("name",{ template:``, data:{ } })
- extend:封装自定义全局组件
第四部分: 组件开发
-
vue全家桶:vue-cli + vue2.0 + vuex + vue-router + axios + element-ui
-
组件component
-
模板template
-
prop,单项数据流:
所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。
每次父级组件发生更新时,子组件中所有的 prop 都将会刷新为最新的值。这意味着你不应该在一个子组件内部改变 prop
第四部分: 脚手架
区别
- 3.0以上有图形界面:vue ui
环境:
- node环境
- 可以选择安装cnpm淘宝包管理,yarn
- 安装 包:npm i(install)
- 卸载:npm uninstall
- webpack包:$ npm i webpack-cli -g
- vue-cli(vue脚手架):
-
3.0<:npm i vue-cli -g
- >3.0:npm install -g @vue/cli
项目
创建
-
创建项目:vue init webpack 项目名
3以上:vue create 项目名
-
to get start:
-
❤️.0:cd myVuePro npm run dev
- >3.0:npm run serve
-
退出:Ctrl+C
第四部分: 生命周期
钩子函数
beforeCreate()
- 实例刚刚创建,元素dom还没被初始化,暂时不知道这个周期里的操作
created()
- 数据data初始化完成,方法也可以调用,可以在这时改变数据,占用处理时间过多会导致页面空白
- Vue入门学习笔记【基本概念、对象、过滤器、指令等】
- Vue学习笔记 1 - 基本指令
- Vue 学习笔记 1.0 --- 基本概念 && 常用指令
- vue.js 学习笔记1——Vue基本认识与基本指令
- 前端学习笔记四:Vue(1)基本语法 + 条件语句 + 循环语句
- 1.vue的基本概念及常见指令
- AngularJS学习笔记之基本指令(init、repeat)
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- Git学习笔记(1)——基本操作指令
- Vue学习第一天总结(Mustache语法,Vue基本指令,动态绑定)
- Vue中的基本指令操作v-xxx 指令
- Vue.js第一天学习笔记(数据的双向绑定、常用指令)
- Vue学习-基本指令
- AngularJS学习笔记之基本指令(init、repeat)
- Vue.js指令的基本使用【总结】
- vue指令(组件)的基本使用一
- 从零开始学 Web 之 Vue.js(一)Vue.js概述,基本结构,指令,事件修饰符,样式
- Vue.js学习笔记:在元素 和 template 中使用 v-if 指令
- 前端笔记之Vue(一)初识SPA和Vue&webpack配置和vue安装&指令
- Vue基本指令