vue学习

时间  2021-05-09
标签 css html vue node ios vue-cli npm json axios 数组 栏目 CSS 繁體版
原文   原文链接

  1. 介绍
    兼容性：ie8+
    特色：css

    1. 声明式渲染     
    只须要将vue实例中的变量声明在模块中便可
    <p>{{message}}</p>
2. 使用指令完成条件渲染和列表渲染
3. 双向数据绑定
    <input type="text" name="username">
4. 组件化（模块化）

  2. 安装
    1) scripthtml

    只适合学习使用

    2) npmvue

    $ npm install vue --save

    3) 脚手架node

    无需安装只管使用

  3. vue实例对象
    1) 实例化ios

    let vm = new Vue({
    el,            // 用于表示模板
    data:{},    // 用于保存该vue实例的变量，用于页面渲染或者双向数据绑定 ,当vue实例建立后，data中的值就会放入到响应式系统中，只要data中的值发生了变化，页面中也就相应的获得响应。

})

    2) vue实例能够直接访问data中的变量vue-cli

    let vm = new Vue({
    data:{
        a:1,
        b:2
    }
})        
vm.a

  4. vue的生命周期
    vue实例对象由建立到页面渲染到最后销毁的整个过程
    1) 生命周期函数npm

    breforeCreate
created
    vue实例对象的建立完成，data中的变量也绑定在vue实例对象上
beforeMount
    在模块转换为具体的虚拟dom以前的阶段，这个阶段完成mount的准备工做，好比将html转换为template,获取data中变量
mounted
    已经mount完毕，也就是说已经将data中的变量设置到了template中
beforeUpdate
    当data中的值发生了变化，网页准备从新更新以前
updated
    当网页从新渲染完成
beforeDestory
destoryed

    2) 生命周期函数的应用json

    这些函数做为Vue构造函数参数的属性存在，可使用函数简写的语法，在生命周期钩子函数中，this指向指向vue实例

let vm = new Vue({
    created(){
        this -> vm
    }
})
  5. 双向数据绑定

  6. 模板语言
    1) 声明式渲染axios

    {{message}}
{{表达式}}

    2) 指令数组

    v-on:事件类型
v-bind:属性
v-if="条件"
v-show="条件"     
    当dom元素频繁的显示与隐藏相互切换使用v-show，由于在隐藏与显示切换的时候不操做dom对象只改变dom对象的display属性
v-for="item in list"
v-html="v"

    3) 指令简写

    v-on:click         => @click
v-bind:value    => :value

案例：
<form action="" @submit="submitHandler"></form>
<form action="" v-on:submit="submitHandler"></form>

<input type="checkbox" v-bind:value="ids">
<input type="checkbox" :value="ids">
    :属性 动态绑定，表示ids为变量，去data中匹配这个变量
<input type="checkbox" value="ids">
    属性     静态绑定，表示ids为值，也就是value的值为ids
<div v-bind:style="s"></div>

new Vue({
    data:{
        ids:[],
        s:{
            color:"red",
            background:"#ededed"
        }
    },
    methods:{
        submitHandler(){

        }
    }
})

  7. 事件机制
    1) 事件绑定

    v-on:eventType="handler"
@eventType="handler"
@eventType="js表达式"

    2) 事件对象

    1. 事件处理函数中没有参数
    <button @click="add"></button>

    methods:{
        add(event){
            event就是事件对象
        }
    }
2. 事件处理函数中有参数
    <button @click="add(3,$event)"></button>

    methods:{
        add(num,event){
            num 为3
            event就是事件对象
        }
    }
3) 事件类型修饰符
    1. 事件修饰符
        @eventType.prevent
        @eventType.stop
        @eventType.self
        @eventType.once
        @eventType.capture
        @scroll.passive
    2. 按键修饰符
        只适用于keyup、keydown、keypress
        @keyup.enter
        @keyup.tab
        @keyup.delete
        @keyup.esc
        @keyup.space
        @keyup.up
        @keyup.right
        @keyup.down
        @keyup.left
    3. 系统修饰键
        @eventType.ctrl
        @eventType.alt
        @eventType.shift
        @eventType.meta    
    4. 鼠标按键修饰符
        适用于mouseup、mousedown、mousepress
        @eventType.left
        @eventType.right
        @eventType.middle

  1. 动态绑定class与style
    1) class

    :class="表达式"
:class="{className:flag}"
    className存在与否取决于flag是否为true
:class="['basic',a]">

    2) style

    style="backgrond:pink;color:#fff"
=>
:style="{background:'pink',color:'#fff'}"
=>
:style="{background:a,color:b}"
data:{
    a:"pink",
    b:"#fff"
}
=>
:style="[a,b]"
data:{
    a:{background:"pink"},
    b:{color:"#fff"}
}

  2. 条件渲染
    v-if
    v-else-if
    v-else

    案例分析：

    <div v-if='flag' :key="1">
    hello
</div>
<div v-else :key="2">
    world
</div>

    v-show

    <div v-show='flag'>
    hello
</div>

  3. 列表渲染
    <ul>

    <li v-for="item in list" :key="item">
    {{item}}
</li>

    </ul>

    data:{

    return {
    list:["国际新闻","国内新闻","体育新闻"]
}

    }

    list.pop()
    list.push()

  4. 深刻了解组件
    组件开发 （索菲亚家具设计与定制）
    组件调用 (索菲亚售后安装)

    1) 组件注册

    全局注册
    全部的vue实例对象均可以调用的组件
    Vue.component(组件名,config)
    在组件中，data属性不能为对象了，而必须为一个函数，这个函数返回一个对象
    config:{
        template:``,        //模板，相似于以前的el
        props:["title"],// 指望父组件传递给当前组件的参数title
        data(){                    //保证每一个组件都拥有一份独立的data数据
            return {

            }
        },
        components:{},    //组件的局部注册
        methods:{},
        beforeCreate(){

        },
        ...
    }
局部注册
    当前的vue实例对象才能调用该组件
    new Vue({
        el,
        data:{

        },
        methods:{},
        components:{
            组件名:config
        }
    })

    2) 组件之间参数的传递 props【父->子】

    用于声明当前组件指望接收父组件传递给它的参数，这些参数能够经过this来直接访问
1. 经过数组来声明参数名称
    props:["title","type"]
2. 经过对象来声明参数的名称以及数据类型
    props:{
        title: String,
      likes: Number,
      isPublished: Boolean,
      commentIds: Array,
      author: Object,
      callback: Function,
      contactsPromise: Promise 
    }
3. 静态传值、动态传值
    静态传值只能传递字符串的值
    <my-test 
        a="hello world"     //静态传值
        :b="true"                  //动态传值
        :c="12.3" 
        :d="{a:'terry'}"
        :e="()=>{alert(1)}"></my-test>

    let myTest = {
        template:`
            <div>
                <p>a:{{typeof a}} , {{a}}</p>
                <p>b:{{typeof b}} , {{b}}</p>
                <p>c:{{typeof c}} , {{c}}</p>
                <p>d:{{typeof d}} , {{d}}</p>
                <p>e:{{typeof e}} , {{e}}</p>
            </div>
        `,
        props:{
            a:String,
            b:Boolean,
            c:Number,
            d:Object,
            e:Function
        }
    }
4. 单向数据流
    全部的 prop 都使得其父子 prop 之间造成了一个单向下行绑定：父级 prop 的更新会向下流动到子组件中，可是反过来则不行。这样会防止从子组件意外改变父级组件的状态，从而致使你的应用的数据流向难以理解。
3) 组件之间函数的传递 自定义事件【子->父】
    在子组件的方法调用的时候，须要修改父组件中的变量
    思路：
        1) 子组件直接修改父组件的值   X
        2) 当子组件中函数执行完毕后通知父组件的函数进行执行
            子组件的事件处理函数中
                this.$emit("foo")    经过父组件触发foo函数
            父组件
                <son-component @foo="handler"> </son-component>
            当this.$emit("foo")，父组件中的handle就要执行了
4) 插槽
    1. 匿名插槽
        <my-component>
            hello world
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        <slot></slot>
                    </div>
                </div>
            `
        }

        slot会接受到my-component的内容
    2. 具名插槽
        <my-component>
            实参1
            <template v-slot:content>
                <div>content的内容</div>
            </template>
            实参2
            <template v-slot:footer>
                <div>footer的内容</div>
            </template>
        </my-component>

        let myComponent = {
            template:`
                <div>
                    <h2></h2>
                    <div>
                        形式参数1
                        <slot name="content"></slot>
                    </div>
                    <div>
                        形式参数2
                        <slot name="footer"></slot>
                    </div>
                </div>
            `
        }
    3. 做用域插槽
  1. 计算属性
  2. 监听器
  3. 表单
  4. 脚手架 vue-cli

1) 为何使用脚手架

1. 模块化机制
    2. vue-cli可以进行项目管理
        1. 建立而且初始化工程
            node_modules
            src
                components
                pages
                App.vue     根组件
                main.js     入口文件
            package.json
        2. 测试
            自带静态服务器
        3. 打包
            vue -> html/css/js

2) 安装脚手架程序
    1. 本地安装node
        > node -v
        v 10.16.0
    2. 全局安装cnpm
        > npm install -g cnpm --registry=https://registry.npm.taobao.org

    3. 全局安装@vue-cli
        > cnpm install -g @vue/cli
        > vue --version
        @vue.cli 4.0.3

    4. 建立app01
        > vue create app01
    5. 安装依赖
        > cd app01
        // 安装axios qs
        > cnpm install axios qs --save

        // 安装element
        > vue add element
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程