前端学习笔记Vue入门

Vue.js入门教程

参考文献

1. Vue-Cli webpack打包入门：http://www.cnblogs.com/keepfool/p/5678427.html
2. Vue中文文档：https://cn.vuejs.org/v2/guide/index.html
3. Vue-cli webpack打包实战：https://segmentfault.com/a/1190000008143264
4. over

安装Vue.js

1. 直接下载并用

2. over

Class与Style绑定

1. 绑定HTML Class

   对象语法
   我们可以传给 v-bind:class 一个对象，以动态地切换 class：
   
   
   data: {
     isActive: true,
     hasError: false
   }结果渲染为
   
   
   利用计算属性渲染
   
   data: {
     isActive: true,
     error: null
   },
   computed: {
     classObject: function () {
       return {
         active: this.isActive && !this.error,
         'text-danger': this.error && this.error.type === 'fatal'
       }
     }
   }
   
   数组语法
   可以把一个数组传给 v-bind:class，以应用一个 class 列表：
   
   data: {
     activeClass: 'active',
     errorClass: 'text-danger'
   }
    
    绑定在组件上
    
   

   ​

2. 绑定内联样式

   
   data: {
     activeColor: 'red',
     fontSize: 30
   }
   绑定到一个样式对象上：
   
   data: {
     styleObject: {
       color: 'red',
       fontSize: '13px'
     }
   }
   
   数组语法
   
   
   自动添加前缀
   多重值
   

   ​

3. over

条件渲染

1. v-if
Yes
或者
Yes
No

新增v-else-if

  A


  B


  C


  Not A/B/C



2.v-show
3.v-if&v-for

列表渲染

1. v-for

   
     
   
       {{ item.message }}
     
   
   
   
     
   
       {{ parentMessage }} - {{ index }} - {{ item.message }}
     
   
   
   用of代替in
   
   
   
     
   
       {{ value }}
     
   
   
   第三个参数为索引
   
     {{ index }}. {{ key }}: {{ value }}
   
   

   ​

2. over

事件处理

表单输入绑定

组件

1. 使用组件

   1.全局注册
   2.局部注册
   3.DOM模板解析
    
   、
   、、 
     使用is
     
   4.data必须是函数
   5.组件组合
   
   

2. Prop

   1.使用Prop传递数据
   Vue.component('child', {
     // 声明 props
     props: ['message'],
     // 就像 data 一样，prop 也可以在模板中使用
     // 同样也可以在 vm 实例中通过 this.message 来使用
     template: '{{ message }}'
   })
   传入普通字符串
   
   
   2.HTML 特性是不区分大小写的。所以，当使用的不是字符串模板时，camelCase (驼峰式命名) 的 prop 需要转换为相对应的 kebab-case (短横线分隔式命名)：
   Vue.component('child', {
     // 在 JavaScript 中使用 camelCase
     props: ['myMessage'],
     template: '{{ myMessage }}'
   })
   
   
   
   3. 动态Prop
   
       
       
   
       
    
   new Vue({
     el: '#prop-example-2',
     data: {
       parentMsg: 'Message from parent'
     }
   })
   可以使用 v-bind 的缩写语法
   
   child是子组件。
   
   4.字面量语法vc动态语法
   
   
   
   
   
   5.单向数据流
   Prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是反过来不会。这是为了防止子组件无意间修改了父组件的状态，来避免应用的数据流变得难以理解。
   
   每次父组件更新时，子组件的所有 prop 都会更新为最新值。这意味着你不应该在子组件内部改变 prop。
   
   子组件定义局部变量
   props: ['initialCounter'],
   data: function () {
     return { counter: this.initialCounter }
   }
   子组件定义计算属性
   props: ['size'],
   computed: {
     normalizedSize: function () {
       return this.size.trim().toLowerCase()
     }
   }
   
   6.Prop验证
   Vue.component('example', {
     props: {
       // 基础类型检测 (`null` 指允许任何类型)
       propA: Number,
       // 可能是多种类型
       propB: [String, Number],
       // 必传且是字符串
       propC: {
         type: String,
         required: true
       },
       // 数值且有默认值
       propD: {
         type: Number,
         default: 100
       },
       // 数组/对象的默认值应当由一个工厂函数返回
       propE: {
         type: Object,
         default: function () {
           return { message: 'hello' }
         }
       },
       // 自定义验证函数
       propF: {
         validator: function (value) {
           return value > 10
         }
       }
     }
   })
   
   

   ​

3. 非Prop特性

4. 自定义事件

   

   image

   子组件与父组件通讯
   1.使用v-on绑定自定义事件
   每个 Vue 实例都实现了事件接口，即：
   使用 $on(eventName) 监听事件
   使用 $emit(eventName, optionalPayload) 触发事件
   
     
   {{ total }}
     
     
   
   Vue.component('button-counter', {
     template: '{{ counter }}',
     data: function () {
       return {
         counter: 0
       }
     },
     methods: {
       incrementCounter: function () {
         this.counter += 1
         this.$emit('increment')
       }
     },
   })
   
   new Vue({
     el: '#counter-event-example',
     data: {
       total: 0
     },
     methods: {
       incrementTotal: function () {
         this.total += 1
       }
     }
   })
   
   //带参数情况
    methods: {
       handleSendMessage: function () {
         this.$emit('message', { message: this.message })
       }
     }
   2.给组件绑定原生事件
   
   
   3. .sync修饰符
   当一个子组件改变了一个带 .sync 的 prop 的值时，这个变化也会同步到父组件中所绑定的值。
   
   4.使用自定义的表单输入组件
   5.自定义组件的v-model
   6.非父子组件的通讯
   var bus = new Vue()
   // 触发组件 A 中的事件
   bus.$emit('id-selected', 1)
   // 在组件 B 创建的钩子中监听事件
   bus.$on('id-selected', function (id) {
     // ...
   })
   

5. 使用插槽分发内容

   1. 单个插槽
   2.具名插槽
   3.作用域插槽
   4.解构
   

6. 动态组件

   ​

7. 其他杂项

动画&过渡

1. Vue在插入、更新或移除DOM时，提供多种不同方法应用效果过渡

   Vue 提供了 transition 的封装组件，在下列情形中，可以给任何元素和组件添加 entering/leaving 过渡
   
   条件渲染 (使用 v-if)
   条件展示 (使用 v-show)
   动态组件
   组件根节点
   
     
       Toggle
     
     
       
   hello
     
   
   
   new Vue({
     el: '#demo',
     data: {
       show: true
     }
   })
   .fade-enter-active, .fade-leave-active {
     transition: opacity .5s;
   }
   .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
     opacity: 0;
   }
   
   过渡类名
   在进入/离开的过渡中，会有 6 个 class 切换。
   具体参考Vue官方文档过渡动画这一章节
   
   css过渡
   css动画
   自定义过渡类名
   enter-class
   enter-active-class
   enter-to-class (2.1.8+)
   leave-class
   leave-active-class
   leave-to-class (2.1.8+)
   
   

2. 状态过渡

3. ​

可复用性&组合

1. 混入

   混入 (mixins) 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。
   // 定义一个混入对象
   var myMixin = {
     created: function () {
       this.hello()
     },
     methods: {
       hello: function () {
         console.log('hello from mixin!')
       }
     }
   }
   
   // 定义一个使用混入对象的组件
   var Component = Vue.extend({
     mixins: [myMixin]
   })
   
   var component = new Component() // => "hello from mixin!"
   
   当组件和混入对象含有同名选项时，这些选项将以恰当的方式混合。
   
   全局混入
   
   

   ​

2. 自定义指令

3. 渲染函数& JSX

   Vue 推荐在绝大多数情况下使用 template 来创建你的 HTML。
   
   

   ​

4. 插件

5. 过滤器

工具

规模化

1. 官方路由

   推荐使用官方 vue-router 库：

   ​

2. 整合第三方路由

   如果有非常喜欢的第三方路由，如 Page.js 或者 Director，整合很简单。这有个用了 Page.js 的复杂示例。

3. over

vue-router

vue-router

1. 参考文献：https://router.vuejs.org/zh-cn/essentials/named-routes.html

2. vue-router的基本使用方法

   • 在router 、index.js文件中定义router

     这里有个坑，定义path的时候不能和其他path重名，path就是展示在浏览器中的路由。

   • 然后使用this.$router.push({name: Message})

3. 代码

   import Vue from 'vue'
   import Router from 'vue-router'
   import HelloWorld from '@/components/HelloWorld'
   import Test from '@/components/Test'
   import Message from '@/components/Message'
   // const Test = resolve => require(['../components/Test.vue'], resolve)
   // const HelloWorld = resolve => require(['../components/HelloWorld.vue'], resolve)
   Vue.use(Router)
   
   // let routes = [
   
   // ]
   export default new Router({
     routes: [
       {
         path: '/',
         name: 'HelloWorld',
         component: HelloWorld
       },
       {
         path: '/test',
         name: 'Test',
         component: Test
       },
       {
         path: '/message',
         name: 'Message',
         component: Message
       }
     ]
   })
   

//Message.vue
methods: {
routeToTest () {
this.$router.push({name: 'Test'})
}
}

或者使用
前往test页路由

4. over

Vue API

JQuery教程

jquery语法

1. 参加文献：http://www.runoob.com/jquery/jquery-syntax.html

2. 语法

   1. 简写
   $(function(){
    
      // 开始写 jQuery 代码...
    
   });
   
   2.标签
   3.#id选择器
   4..class选择器
   5. 更多：
   $(*) $(this) $("p.intro") $("p:first") $("ul li:first") $("ul li:first-child") $("[href]") $("a[traget='_black']")
   
   6.独立使用jquery
   
   
   
   
   
   7. $(":button")
   

3. 效果

   1. jquery隐藏/显示
   $("p").hide()
   $("p").show()
   $("p").toggle()
   $("p").fadeIn()
   $("p").fadeOut()
   $("p").fadeToggle()
   2. 淡入淡出
   3. 滑动
   4. 动画
   $(selector).animate({params},speed,callback);
   $(selector).stop(stopAll,goToEnd);
   5. 停止动画
   6. callback
   7. 链
   

4. jQuery HTML

   text()
   html()
   val()
   回调方法
   1. 捕获
   2. 设置
   3. 添加元素
   4. 删除元素
   append()、prepend()、after()、before()
   remove()、empty()、
   5. css类
   addClass()、removeClass()、toggleClass() 
   $("button").click(function(){
     $("h1,h2,p").addClass("blue");
     $("div").addClass("important");
   });
   6. css()方法
   7. 尺寸
   

5. jQuery遍历

   jquery祖先
   $(document).ready(function(){
     $("span").parent();
   });
   后代
   children()
   同胞
   siblings()、next()、nextAll()、nextUntil()\pev()
   过滤
   first()、last()、eq()、filter()、not()、
   
   

   ​

6. over