Vue学习笔记
程序员文章站
2024-01-05 15:14:28
一:安装 方式1: 脚手架安装 方式2: 直接引入对应的js文件 二:Vue基础知识 三:组件化 四、自定义指令 ......
一:安装
方式1:
脚手架安装
#全局安装 vue-cli
npm install vue-cli --global
# 创建一个基于 webpack 模板的新项目
vue init webpack first-vue
# 进入项目,安装依赖,启动项目
cd my-project
npm install
npm run dev
方式2:
直接引入对应的js文件
二:vue基础知识
1、插值表达式 语法:
{{值}} 作用: 将表达式执行的结果 输出当调用元素的innerhtml中;还可以将数据绑定到视图
2、指令-循环指令 基本语法1: <any v-for="tmp in array"></any> 基本语法2: <any v-for="(value,index) in array"></any> 作用: 在遍历array这个集合时,将临时变量保存在tmp中,创建多个any标签
3、指令-选择指令 语法: <any v-if="表达式"></any> <any v-else-if="表达式"></any> <any v-else="表达式"></any> 作用: 根据表达式执行结果的真假,来决定是否要将当前的这个元素 挂载到dom树
4、指令-事件绑定 语法: <any v-on:eventname="handleevent"></any> 作用: 给指定的元素 将handleevent的方法绑定给指定eventname事件
5、指令-属性绑定 基本语法: <any v-bind:myprop="表达式"></any> 补充,支持简写: <any :myprop="表达式"></any> 作用: 将表达式执行的结果 绑定 到当前元素的myprop属性 <img v-bind:src="'img/'+myimg" alt=""> 动态样式绑定 <p :style="{backgroundcolor:mybgcolor}">动态样式绑定</p> 动态样式类绑定 <h1 :class="{myred:false}">动态样式类的绑定</h1>
6、指令-双向数据绑定 方向1:数据绑定到视图 方向2:将视图中(表单元素)用户操作的结果绑定到数据 基本语法: <表单元素 v-model="变量"> </表单元素>
三:组件化
所谓的组件化,就像玩积木一样,把封装的组件进行复用,把积木(组件)拼接在一起,构成一个复杂的页面应用程序。 组件树就是由各个组件构成的一种数据结构,它存在的意义是为了帮梳理应用程序 1、组件的创建 全局组件 vue.component('my-com',{ template:` <h2>it is a header</h2> ` }) 局部组件 new vue({ components:{ 'my-footer':{ template:'' } } }) 2、组件使用 作为普通的标签去使用 <my-com></my-com> 3、注意事项 1.组件的id和使用方式 遵循烤串式命名方式:a-b-c 2.如果一个组件 要渲染多个元素,将多个元素放在一个顶层标签中,比如div、form 3.全局组件可以用在id为example的范围内的任何一个组件内部,直接调用可以;但是局部组件只能在父模板中直接调用
四、自定义指令
1、创建和使用 vue.directive('change',{ bind:function(el,bindings){ //首次调用 }, update:function(el,bindings){ //只要是有数据变化,都会调用 }, unbind:function(){ //解绑 } }) <any v-change="count"></any>