vue入门笔记,vue常用指令

时间:2019-09-22 01:10来源: 操作系统
1.v-text 是元素的innerText只能在双标签中使用 webpack属性配置 javascript(参考webpack.config.js) const path=require(‘path’)const htmlWebpackPlugin=require('html-webpack-plugin');module.exports={ entry:{ //main是默认入

1.v-text 是元素的innerText只能在双标签中使用

webpack属性配置

javascript(参考webpack.config.js)

const path=require(‘path’)
const htmlWebpackPlugin=require('html-webpack-plugin');
module.exports={ 
    entry:{ //main是默认入口,也可以是多入口
        main:’./src /main.js’,
    },
    output:{ //出口
        path:path.join(__dirname , ’..’ , ’dist’)’’, //最好是绝对路径
        //代表当前目录的上一级的dist
        filename:’./build.js’ //指定js文件
    },
    module:{
        //loader与rules一样的功能,rules是webpack2.x之后新加的,用一种即可
        loaders:[  
            {
                test:/.css$/,
                loader:’style-loader!css-loader’,//顺序是反过来的2!1
            },
            {
                test:/.(jpg|svg|png|gif)$/i,
                loader:’url-loader?limit=4096&name=[name].[ext]’,
                    // [name].[ext]内置提供的,文件名,后缀名
                options:{//参数可以拼在loader里也可以写在options里,选一种即可
                    limit:4096,
                    name:’ [name].[ext]’
                }
            }

        ]
    },
    plugins:[
        //插件的执行顺序是依次的,和loader是相反的
        new htmlWebpackPlugin({
            template:’./src/index.html’
            //将src下的template属性描述的文件根据当前配置的output.path,将文件移动到该目录
        })
    ]
}

v-html是元素的innerhtml,不能包含{{xxx}}

webpack-ES6的处理

  • ES6的模块,vue本身默认支持es6的模块导入导出
  • babel
    • babel-loader ( 内部依赖babel-core )
      • 关键字 (presets es2015)
  • 函数 ( plugins babel-plugin-transform-runtime )

v-if元素是否移除或者插入

ES6中的模块

  • 默认

    • 导出export default temp;
    • 导入import defaultObj from './cal.js';
  • 声明式

    • 1导出export var obj1="我是声明式导出1"
    • 2导出export var obj2="我是声明式导出2"
    • 3单独导出var obj4="我是声明式导出4"; export {obj4};
    • 导入import {obj1,obj2,obj4} from './cal.js';
  • 全体

    • 导入import * as allObj from './cal.js'

运行结果:

Object {default: "我是默认导出的结果", obj1: "我是声明式导出1", obj2: "我是声明式导出2", obj3: "我是声明式导出3",obj4: "我是声明式导出4"…}
1.  __esModule:true
2.  default:"我是默认导出的结果"
3.  obj1:"我是声明式导出1"
4.  obj2:"我是声明式导出2"
5.  obj3:"我是声明式导出3"
6.  obj4:"我是声明式导出4"
7.  __proto__:Object
  • 默认导入和声明式导入在使用上的区别
    • 要注意:声明式导入的时候,必须名称要一致(按需导入)
    • 默认导入 可以随便使用变量名
  • import 和 export 一定要写在 顶级作用于内 ,不能写在 {}里

v-show元素是否显示或隐藏

ES6中的代码变化

  • 对象属性的声明

    var name='abc';

    var person={name}; 简写 - 》 var person={name:name}

  • 声明函数

    var cal={

    add1:function(){
        return 1;
    },
    add2 (){
        return 2;
    }
    

    }

  • 当属性的key与变量名相同,并且以变量值为value,就可以简写{name}->{name:name}

  • es6函数里干掉了function

v-model双向元素绑定,v-bind是单向元素绑定(内存js改变影响页面)

vue单文件

  • 单文件就是以.vue结尾的文件。最终通过webpack也会编译成.js在浏览器运行
  • 内容:<'template'><'/template'> + <'script'><'/script'> + <'style'><'/style'>
  • 1: template中只能有一个根节点 2.x
  • 2: script中 按照 export default 来写
  • 3: style中 可以设置 scoped属性,让其只在template中生效

2.class结合v-bind使用

以单文件的方式启动

  • webpack找人来理解你的单文件代码
    • vue-loader,vue-template-compiler,代码中依赖vue
  • 启动命令
    ..\node_modules\.bin\webpack-dev-server --inline --hot --open 默认8080端口
    ..\node_modules\.bin\webpack-dev-server --inline --hot –open --port 8090 指定8090端口

需要根据可变的表达式的结果来给class赋值,就需要用到v-bind:

关于启动的目录结构

my-project
    - src  存放人可以看懂的代码,具有一定的功能划分 ,mvc
    - dist 存放真实上线的代码(减少请求,混淆代码),机器能看懂
    - webpack.config.js 打包生成dist下的代码
    - package.json   包信息描述  还能做命令简化

命令行  webpack           开发   
立刻读取webpack.config.js,生成到dist目录下
webpack-dev-server     测试

运行src下的代码,虚拟出build.js 
在含有packge.json文件下
npm install       安装所有devDependencies + dependencies
npm install –production  只安装 dependencies

package.json里   npm run dev  npm run build
{
    "scripts": {   
        "dev": "..\node_modules\.bin\webpack-dev-server --inline --hot --open",  开发的命令简化
        "build":"webpack"   打包代码到生产环境
    }
}

v-bind:属性名=“表达式”,最终表达式运算结束的结果赋值给该属性名

vue介绍

  • 2014年诞生,2013年react,09年angularjs
  • 作者 尤雨溪
  • 核心概念:
    组件化 双向数据流(基于ES5中的defineProperty来实现的),IE9+才支持
  • angular核心 :
    模块化 双向数据绑定(脏检测:一个数组($watch))
    • 开发一个登陆的模块,登录需要显示头部、底部、中部
    • 组件 :组合起来的一个部件 (头部、底部、中部)
    • 细分代码
      • 头部:页面、样式、动态效果
      • 代码:template style script
  • 框架对比:
    https://cn.vuejs.org/v2/guide/comparison.html

简化的写法是:`:属性名=“表达式”`

双向数据流

  • 1.js内存属性发生改变,影响页面的变化
  • 2.页面的改变影响js内存属性的改变

class:结果的分类

vue中常用的v-指令演示

  • 常用指令
  • v-text 是元素的innerText,只能在双标签中使用
  • v-html 是元素的innerHTML,不能包含
  • v-if 元素是否移除或者插入
  • v-show 元素是否显示或隐藏
  • v-model 双向数据绑定,v-bind 单向数据绑定(内存js改变影响页面)

一个样式:返回字符串(三元表达式和key和样式的清单对象)

class结合v-bind使用

  • 需要根据可变的表达式的结果来给class赋值,据需要用到v-bind:class=”xxx”
  • v-bind:属性名=”表达式”,最终表达式运算结束的结果复制给该属性名
    • 简化写法 :属性名=”表达式”
  • class:结果分类
    • 一个样式: 返回字符串(三元表达式和key和央视的清单对象)
      <div v-bind:class="isRed?'red':'green'">单个class</div> <li v-for="v in stu" :class="{'A':'red','B':'green'}[v.score]">{{v.name}}</li>
    • 多个样式: 返回对象 (样式做key,true或false做值)
      <div :class="{'red':true,'big':true}">多个class 对象方式</div>

多个样式:返回对象(样式做key,true或false做值)

methods 和v-on的使用

  • 绑定事件的方法
    • v-on:事件名=”表达式||函数名”
    • 简写@事件名=”表达式||函数名”
  • 函数名如果没有参数 调用时候可以不加小括号
  • 声明组件内内函数,在export default这个对象的跟属性上加上methods属性,其是一个对象
    • key 是函数名, 值是函数体
  • 在export default这个对象的跟属性上加上data属性, 其是一个对象,返回一个对象
    • 对象的属性是我们初始化的变量名称
  • 凡是在template中使用变量或者函数,不需要加this
  • 在script中使用就需要加上this

3.methods和v-on的使用

v-for的使用

  • 可以单独使用操作数组 (item,index)
  • 可以单独使用操作对象 (value,key,index)
  • key是类似track by的一个属性
  • 为的是告诉vue,js中的元素,与页面之间的关系,当视图删除元素的时候,是单个元素的删除二不是整版替换,所以需要关联其关系,设置(必须,性能) 2.xxx之后必须设置

*绑定事件的方法

父子组件的使用

  • 父和子 使用的是父,被用的是子
  • 父需要声明子组件,引入子组件对象,声明方式如下

    javascript

    import 子组件对象 from './xxxr.vue'; export default {

    components: {
        组件名: 子组件对象
    }
    

    }

  • 全局组件,使用更为方便,不需要申明,直接用

  • 在mian.js中引入一次,在main.js中使用Vue.component(‘组件名’,组件对象)
  • 所有的组件就可以直接通过组件名使用

`v-on:事件名=“表达式||函数名”`

父传子

  • 父组件通过子组件的属性将值进行传递
    • 方式有2
      • 常量:prop1=”常量值”
      • 变量:prop2=”变量名”
  • 子组件需要声明
    • 根属性props:[‘prop1’,’ prop2’]
    • 在页面中直接使用{{ prop1’}}
    • 在js中应该如何使用prop1? this.props1来获取

简写:`@事件名=“表达式||函数名”`

看文档的对象分类

  • 1.全局的代表Vue.的
  • 2.实例的代表this.或者new Vue().
  • 3.选项代表 new Vue()的参数 或者 export default 里边的属性

*函数名如果没有参数,可以省略() 只给一个函数名称

子向父组件通信(vuebus)(扩展)

  • 通过new Vue()这样的一个对象,来$on(‘事件名’,fn(prop1,prop2))
  • 另一个组件引入同样的vuebus,来$emit(‘事件名’,prop1,prop2)

*声明组件内函数,在export default这个对象的根属性加上methods属性,其是一个对象

key是函数名 值是函数体

*在exports default这个对象的根属性加上data属性,其是一个函数,返回一个对象

对象的属性是我们初始化的变量的名称

*凡是在template中使用变量或者函数,不需要加this

*在script中使用就需要加上this

3.v-for的使用

可以使用操作数组:(item,index)

可以使用操作对象(value,key,index)

编辑: 操作系统 本文来源:vue入门笔记,vue常用指令

关键词: