欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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>

 

上一篇:

下一篇: