Vue个人笔记

淡淡的烟草味﹌ 2023-10-09 10:50 22阅读 0赞

\{\}相当于new object，  
先把基础的Vue学好，之后再用脚手架，就能够融会贯通了！！！  
  
vue对象中的几个主要对象：  
new Vue(\{  
    el:'app',           //作用于哪个模板  
    data:\{\}             //存放vue组件的数据  
    methods:\{\}         //dom绑定事件的书写区  
    computed:\{\}        //计算属性,对于任何复杂逻辑，你都应当使用计算属性  
    directives: \{\}       //自定义指令  
    components：\{\}        //自定义组件  
\});  
  
//根组件  
new Vue(\{  
data:\{\}             //存放vue组件的数据  
    methods:\{\}         //dom绑定事件的书写区  
    computed:\{\}  
      
        //子组件  
    component:\{  
            data:\{\}             //存放vue组件的数据  
        methods:\{\}         //dom绑定事件的书写区  
        computed:\{\}  
    \}  
\});  
  
一：页面渲染（ Rendering ）   
1,数据绑定  
    数据绑定最常见的形式就是使用“ Mustache” 语法 ( 双大括号 ) 的文本插值  
    \{ \{msg\}\}  
    可以在双大括号中使用 Javascript 表达式  
    \{ \{ message.split('').reverse().join('') \}\}  
2,计算属性  
模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的  
逻辑会让模板过重且难以维护。  
    <div id="example">\{ \{ message.split('').reverse().join('') \}\}</div>  
    对于任何复杂逻辑，你都应当使用计算属性  
    <div id="example">  
        <p>Computed reversed message: "\{ \{ reversedMessage \}\}"</p>  
    </div>  
    var app = new Vue(\{  
        el: '\#example',data: \{message: 'Hello'\},  
        computed: \{  
        reversedMessage: function ()  
        \{  
                return this.message.split('').reverse().join('')  
        \}  
    \}\})  
3，属性的绑定  
指令 (Directives) 是带有 v- 前缀的特殊属性,指令的职责是，当表达式的值改变时，将  
其产生的连带影响，响应式地作用于 DOM 。一些指令能够接收一个“ ” 参数 ，在指令名称  
之后以冒号表示。  
  
v-bind 指令可以用于响应式地更新 HTML 属性，简写形式为 ":"  
<a v-bind:href="url"></a>  
  
4,事件的绑定  
v-on 指令用于监听 DOM 事件，参数为事件名称，引号内为绑定的事件处理函数或者是  
Javascript 代码（不推荐）。简写形式为 "@"  
<a v-on:click="doSomething"></a>  
  
4-2  
事件修饰符  
<form v-on:submit.prevent="onSubmit"></form>  
类似的还有停止冒泡（ .stop ） , 只当事件在当前元素本身时触发（ .self ），仅触发一次 事件（ .once ）  
键值修饰符  
<input v-on:keyup.13=“submit”> 13 可以使用 .submit 代替  
.enter 、 .tab 、 .delete 、 .esc 、 .space 、 .up 、 .down 、 .left 、 .right  
  
5,条件渲染（ v-if ）  
    根据给定条件判断决定是否显示元素  
    <h1 v-if="type === 'A'">A</h1>  
    <h1 v-else-if="type === 'B'">B</h1>  
    <h1 v-else>C</h1>  
条件渲染（ v-show ）  
    与 v-if 不同的是带有 v-show 的元素始终会被渲染并保留在 DOM 中。 v-show 是简单地切换元素的 CSS 属性 display  
    注意， v-show 不支持 <template> 语法，也不支持 v-else 。 如果需要非常频繁地切换元素，则使用 v-show 较好  
  
6, 列表渲染（ v-for ）  
v-for 指令根据一组数组的选项列表进行渲染,使用 item in items 形式的特殊语法  
 items 是源数据数组并且 item 是数组元素迭代的别名  
  
7,表单输入绑定  
v-model 指令可以在表单控件元素上创建双向数据绑定(不会用于文本元素)  
    1 . 单行文本、多行文本框、单选按钮、下拉菜单简单使用 v-model 绑定即可  
    <input v-model="message"><p>Message is: \{ \{ message \}\}</p>  
    2 . 复选框（绑定到一个数组中）  
    <input type="checkbox" value="Jack" v-model="checkedNames">  
    <input type="checkbox" value="Jack" v-model="checkedNames">  
    data:\{checkedNames:\[\]\}  
  
二：动画(animation)  
  
Vue 在插入、更新或者移除 DOM 时，提供多种不同方式的应用过渡效果。 包括以下工具：  
1，在 CSS 过渡和动画中自动应用 class  
2，可以配合使用第三方 CSS 动画库，如 Animate.css  
3，在过渡钩子函数中使用 JavaScript 直接操作 DOM  
4，可以配合使用第三方 JavaScript 动画库，如 Velocity.js  
Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添 加 entering/leaving 过渡  
在进入 / 离开的过渡中，会有 6 个 class 切换， v- 是这些类名的前缀，可以在transition 标签中设定 name 属性改变该前缀。  
v-enter(进入前) v-enter-active(进入中) v-enter-to(进入后)   v-leave(离开前)  v-leave-active(离开中)  v-leave-to(离开后)  
1，自定义过渡样式  
        <button @click='show = !show'> 切换 </button>  
            <transition name='fade'>  
                <p v-if='show'> hello vue </p>  
            </transition>  
        <style>  
            .fade-enter-active, .fade-leave-active \{  
                transition: opacity .5s  
            \}  
            .fade-enter, .fade-leave-to \{  
                opacity: 0  
            \}  
        </style>  
          
2，自定义过渡的类名，和其他第三方动画库，animate.css结合使用  
enter-class 、 enter-active-class 、 enter-to-class  
leave-class 、 leave-active-class 、 leave-to-class  
  
    <link rel="stylesheet" href="../css/animate.css">  
        <button @click='show = !show'> 切换 </button>  
    <transition  
        enter-active-class='animated bounce'  
        leave-active-class='animated bounce'>  
        <p v-if='show'> hello vue </p>  
    </transition>  
  
3，javascript 钩子，可以通过 js 钩子定义动画，结合第三方动画库 Velocity.js( 以及插件Velocity.ui.js)  
before-enter 、 enter 、 after-enter 、 before-leave 、 leave 、 after-leave  
    <script src="../js/velocity.min.js"></script>  
    <script src="../js/velocity.ui.js"></script>  
        <button @click='show = !show'> 切换 </button>  
        <transition @enter='enter' @leave='leave'>  
            <p v-if='show'> hello vue </p>  
        </transition>  
    methods:\{  
        enter:function(el,done)\{  
        Velocity(el,"callout.pulse", \{ duration: 650 ,complete:done\}) \},  
        leave:function(el,done)\{  
        Velocity(el,"callout.bounce", \{ duration: 1500 ,complete:done\}) \}  
    \}  
      
4，列表过渡  
    为了同时渲染整个列表，使用 <transition-group> ，不同于 <transition> ，它会  
    以一个真实元素呈现：默认为一个 <span> 。你也可以通过 tag 特性更换为其  
    他元素，内部元素 总是需要 提供唯一的 key 属性值  
    <script src="../js/velocity.min.js"></script>  
    <transition-group tag="ul" @enter="enter" @leave="leave" >  
        <li v-for='name in nameList' :key='name'>\{ \{name\}\}</li>  
    </transition-group>  
    methods:\{  
        enter:function(el,done)\{  
        Velocity(el,\{ opacity: 1, height: '1.6em' \},\{ complete: done \})\},  
        leave:function(el,done)\{  
        Velocity(el,\{ opacity: 0, height: 0 \},\{ complete: done \})\}  
    \}  
      
三：组件  
组件 (Component) 是 Vue.js 最强大的功能之一。在较高层面上，组件是自定义元素，template用反引号\`\`， 比用引号方便  
  
1,全局注册  
    Vue.component('my-component', \{  
        // 构造 Vue 实例时传入的选项大多数都可以在组件里使用。 data 为函数  
        template : '<div>A custom component!</div>'  
    \})  
    组件在注册之后，便可以作为自定义元素 <my-component></my-component> 在一个实例的模板中使用。注意确保在初始化根实例之前注册  
组件(即 new Vue(\{\}))  
  
2,局部注册  
局部注册 不必把每个组件都注册到全局。我们可以通过某个 Vue 实例 / 组件的实例  
选择 components 注册仅在其作用域中可用的组件。  
    var app = new Vue(\{  
        el:'\#app',  
        components:\{  
            'my-component':\{ template:'<h2>hello component</h2>'\}  
        \}  
    \});  
  
3，自定义组件的使用  
        1，直接使用  
            <my-row></my-row>  
      2，通过 is 关键字使用  
    第一种方式会受到 HTML 本身的限制，因为 Vue 只有在浏览器解析、规范化模  
    板之后才能获取其内容，像 <ul> 、 <ol> 、 <table> 、 <select> 这样的元素里允  
    许包含的元素有限制。  
    <table>  
        <my-row></my-row>  
    </table>  
    变通方法：  
    <table>  
        <tr is="my-row"></tr>  
    </table>  
  
4，父子组件通信  
在 Vue 中，父子组件的关系可以总结为 prop 向下（子）传递，事件向上（父）传递 。  
父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息  
  
    1，父子组件 -props  
        子组件要显式地用 props 选项声明它预期的数据，父组件使用 props 中声明  
        的同名属性进行注入  
        var app = new Vue(\{  
            el:'\#app',  
            data:\{name:'hello parent'\},  
            components:\{  
                'my-son':\{  
                props:\['name'\],// 不区分大小写  
                data:function()\{return \{msg:'hello son' \}\},  
                template:'<div> 子组件， \{ \{msg\}\},\{ \{name\}\}</div>'  
                \}  
            \}  
        \});  
        <div id="app"><my-son :name='name'></my-son></div>  
          
    2，父子组件 - 自定义事件  
    子组件使用自定义事件系统与父组件通信，每个 Vue 实例都实现了事件接口，使用 $on(eventName) 监听事件，  
    使用 $emit(eventName) 触发事件 。父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件  
    <div id="app">  
        <p><b>total:</b>\{ \{total\}\}</p>  
        <button-counter @increment='incrementTotal'></button-counter>     //监听  
        <button-counter @increment=‘incrementTotal’></button-counter>  
        </div>  
        components:\{  
            'button-counter':\{  
            ‘template’:‘<button @click=“incrementCounter”>\{ \{counter\}\}</button>’,  
            data:function()\{ return \{counter:0\}\},  
            methods:\{  
            incrementCounter:function()\{  
            this.counter++;  
            this.$emit('increment'); // 向父组件发射事件  
        \}  
        \} \}  
          
    3，插槽  
    要想在子组件中使用父组件提供的模板就需要使用到插槽。除非子组件模板包含至少一个 <slot> 插口，否则父组件的内容将会被丢弃。  
    <div id="app">  
        <my-component><h3>hello Vue</h3></my-component>  
    </div>  
    components:\{  
        'my-component':\{  
        template:'<div><h2>hello my-component</h2><slot>default slot</slot></div>'  
        \}  
    \}  
    也可以为插槽提供名字，这样可以在一个子组件中插入多个父组件提供的模板。  
    <slot name="header"></slot>  
    <slot name="footer"></slot>  
    <h1 slot="header"> 这里可能是一个页面标题 </h1>  
    <p slot="footer"> 这里有一些联系信息 </p>  
      
    4，作用域插槽  
作用域插槽是一种特殊类型的插槽，用作一个 ( 能被传递数据的 ) 可重用模板，来代替已经渲染好的元素。  
在子组件中，只需将数据传递到插槽，在组件中，具有特殊特性 slot-scope 的 <template> 元素必须存在，  
表示它是作用域插槽的模板。  
    Vue.component('my-ul',\{  
        template:‘<ul><slot v-for=“name in names” \\  
        :text="name"></slot></ul>',  
        data:function()\{return \{names:\['terry','larry','tom','jacky'\]\}\}  
    \});  
    Vue.component('my-list',\{  
        // 允许使用者自定义如何渲染列表的每一项  
        template:‘<my-ul><template slot-scope=“props” >  
        <li>\{ \{props.text\}\}</li></template></my-ul>'  
    \});  
    <div id=’app’>  
        <my-list></my-list>  
    </div>  
      
5，动态组件---可以用vue插件--路由来代替  
通过使用保留的 <component> 元素，动态地绑定到它的 is 特性，可以让 多个组件可以使用同一个挂载点，并动态切换。  
    new Vue(\{  
        data:\{ currentView:'my-com2' \},  
        components:\{  
            'my-com1':\{ template:'<div>component1</div>' \},  
            'my-com2':\{ template:'<div>component2</div>' \},  
            'my-com3':\{ template:'<div>component3</div>' \}  
        \}  
    \})  
    <component v-bind:is="currentView"></component>  
      
  
  
学习组件后的总结：  
  vue就相当于一个组件，它作用于 el：\#app 这个模板，这个模板里的方法，写在methods对象中，模板里的数据写在data对象中.....  
    一个组件是一个作用域，它们各自的方法，数据写在相应的组件里。  
    template模板中，一定要用一个根标签包裹！  
  
四：其他  
  
1，自定义指令  
    全局注册  
        vue.directive(directiveName,options)  
    局部注册  
        new Vue(\{  
        directives: \{  
        directiveName:options  
        \}  
        \});  
    指令定义函数提供了几个钩子函数：  
        bind 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。  
        inserted 被绑定元素插入父节点时调用  
          
    钩子函数参数  
        el 指令所绑定的元素，可以用来直接操作 DOM  
        binding 一个对象，包含了指令相关的信息（参数 binding.argument ）  
  
2，过滤器  
Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两  
个地方： mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达  
式的尾部，由“ |” 管道 符指示。  
    <div id="app"> \{ \{msg | toUpper(arg1,arg2)\}\}</div>  
    new Vue(\{  
        el:"\#app",  
        data:\{msg:'hello world' \},  
        filters:\{  
            toUpper:function(val,arg1,arg2)\{return val.toUpperCase();\}  
        \}  
    \});  
  
3，插件的使用  
    1，通过 script 标签导入，则不需要  
    2，npm，如果在一个模块化工程中使用它，必须要通过 Vue.use() 明确地安装该功能  
    var Vue = require('vue')  
    var VueRouter = require('vue-router')  
    // 不要忘了调用此方法  
    Vue.use(VueRouter)

转载于:https://www.cnblogs.com/wskb/p/11490835.html