Vue.js篇<1>

作者: xinmin | 来源:发表于2018-12-23 22:15 被阅读0次

node+vue：前后端分离MVC+MVVM的开模式

图片.png

vue的基础用法

导入vue.js

<style>
[v-cloak] {
  display: none;
}
</style>
<div id="app">
  <!-- 这里相当于MVVM中的V-->
  <!-- 使用v-cloak能解决差值表达式闪烁的问题-->
  <p v-cloak> {{ msg }} </p>
   <!-- 使用v-text没有闪烁的问题-->
   <!-- 使用v-text会覆盖原本的内容"123"-->
  <p v-text="msg">123</p>
  <!-- 使用v-text会覆盖原本的内容"123"，还会解析html-->
  <p v-html="msg1">456</p>
  <!-- 使用v-bind是绑定属性指令, 可简写为：，还可以写合法的js表达式-->      
  <input type="button" value="按钮" v-bind:title="mytitle + '123' ">
  <!-- 使用v-on绑定事件，简写@-->     
  <input type="button" value="按钮" :title="mytitle + '123' " @:click="show">
</div>

// 这里的vm就是MVVM中的VM
var vm = new Vue({
  el: '#app', // 表示控制页面的id='app'的区域
  // 这里的data就是MVVM中的M
  data: {
    msg: '欢迎学习vue',
    msg1: '<h1>hello world</h1>',
    mytitle: '自定义title'
  },
  methods: {
    show: function () {
      alert('hello')
  }
})

事件修饰符

使用.stop阻止事件冒泡
使用.prevent阻止默认事件
使用.capture实现捕获触发的机制（从外到内）
使用.self实现只有点击当前元素才会触发事件处理函数

使用.once实现事件函数只触发一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue_test</title>
</head>
<body>
    <style>
        .outer {
            background: blue;
            border: 1px solid #ccc;
            height: 300px;
        }
    </style>
    <div id="app">
        <div class="outer" @click='divHandler'>
            <input type="button" value="阻止事件冒泡" @click.stop='btnHandler'>
        </div>
    </div>
</body>
<script src="./vue2.5.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {

        },
        methods: {
            btnHandler(){
                console.log('btn')
            },
            divHandler(){
                console.log('div')
            },
        },
    })
</script>
</html>

双向数据绑定
- v-bind：只能实现数据从model -> view的数据绑定
- v-model：可实现双向数据绑定，注意：只能使用在表单元素中
生命周期
- 创建阶段钩子函数
  - beforeCreate：data，methods等还没有初始化
  - created：发ajax请求，最好时机
  - beforeMount
  - mounted：只要执行完mounted，就表示Vue实例已经初始化完毕了，
    如果要通过某些插件操作页面上的Dom节点，最早要在mounted中进行
- 组件运行周期钩子函数
  - beforeUpadate：当执行时页面上的数据还是旧数据，尚未与更新
  - upadated：执行时页面与data中的数据已经保持同步了，是最新数据
- 组件销毁的钩子函数
  - beforeDestroy：Vue实例从运行阶段进入到销毁阶段，Vue实例上的data和methods、以及过滤器f（ilters）、自定义指令。。。都处于可用状态，此时，还没有真正的销毁
  - destroyed：所有的东西都不可用了
vue-resource：发起ajax请求，它依赖与Vue
- get请求
  
  get请求.png
- post请求
  
  post请求.png
- jsonp请求
  
  jsonp请求.png
Vue动画
- 1.自定义动画
  使用transition包裹标签
  添加一组类，transition 可以添加name='my'，默认是'v-'，添加了就是'my-'
  
  添加的类.png
- 2.使用第三方库
  animate.css
  
  图片.png
  另一种写法.png
  
  使用':duration'设置动画进场与出场时间
  
  动画时间控制.png
- JavaScript钩子函数实现动画（半场动画）
  
  图片.png
  
  绑定事件
  
  图片.png
  图片.png
  图片.png
  
  在实现列表过渡的时候，如果需要过渡元素，是通过 v-for 循环渲染出来的，不能使用transition包裹，需要使用transitionGroup
  
  图片.png
  图片.png
  图片.png
Vue组件
使用驼峰命名是的用法

图片.png

不使用驼峰命名的用法

图片.png
直接写成一步
图片.png
还可以更简单
图片.png

无论是那种方式创建出来的组件，都只能有一个根元素
最常用的一种方式

图片.png
阶段总结

图片.png

components定义私有组件的