Vue笔记

Vue 笔记

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
        {{msg}}
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                msg:'hello vue'
            }
        });
    </script>

现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。不再和 HTML 直接交互了。一个 Vue 应用会将其挂载到一个 DOM 元素上

除了文本插值，还可以像这样来绑定元素 attribute：

  <div id="app2">
        <span v-bind:title="msg">
             鼠标悬停几秒钟查看此处动态绑定的提示信息！
        </span>
      <script>
         new Vue({
            el:"#app2",
            data:{
                msg:'页面加载于'+new Date().toLocaleString()
            }
        });
      </script>

v-bind attribute 被称为指令。指令带有前缀 v-，以表示它们是 Vue 提供的特殊 attribute。在这里，该指令的意思是：“将这个元素节点的 title attribute 和 Vue 实例的 msg property 保持一致”

如果你再次打开浏览器的 JavaScript 控制台，输入 app2.message = ‘新消息’，就会一次看到这个绑定了 title attribute 的 HTML 已经进行了更新。

条件与循环

<div id="app">
    <p v-if="seen">只有seen是true的情况下才可以看到我</p>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            seen:true
        }
    });
</script>

继续在控制台输入 app3.seen = false，你会发现之前显示的消息消失了。

v-for 指令可以绑定数组的数据来渲染一个项目列表：

<div id="app2">
    <ol>
        <li v-for="item in items">
            {{item.name}}
            {{item.age}}
            {{item.sex}}
        </li>
    </ol>
</div>
<script>
  new Vue({
        el:"#app2",
        data:{
            items:[
                {'name':'李宏瑞'},
                {age:'20'},
                {sex:'男'}
            ]
        }
    });
</script>

在控制台里，输入 app4.todos.push({ text: ‘新项目’ })，你会发现列表最后添加了一个新项目。

处理用户输入

可以用 v-on 指令添加一个事件监听器，通过它调用在 Vue 实例中定义的方法：

<div id="app3">
    <button v-on:click="time" value="获取当前的时间">获取当前的时间</button>
    <p>{{msg}}</p>
</div>

<script>
  new Vue({
        el:"#app3",
        data:{
            msg:"",
        },
        methods:{
            time:function () {
                this.msg=new Date().toLocaleString();
            }
        }
    });
</script>

在 time方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

<div id="app4">
    <input type="text" v-model="msg">
    <p>{{msg}}</p>
</div>

<script>
  new Vue({
        el:"#app4",
        data:{
            msg:""
        }
    })
</script>

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单：

<script>
    Vue.component("todo",{
        template: '<li>这是个待办项</li>'
    });
    new Vue({
        el:"#app",
    })
</script>

现在你可以用它构建另一个组件模板：

<div id="app">
    <ol>
        <todo></todo>
    </ol>
</div>

使用props属性传递参数

    像上面那样用组件没有任何意义，所以我们是需要传递参数到组件的，此时就需要使用props属性了！

注意：默认规则下props属性里的值不能为大写；

<div id="app">
    <ol>
        <todo v-for="item in items" v-bind:li="item"></todo>
    </ol>
</div>

<script>
    Vue.component("todo",{
        props:['li'],
        template: '<li>{{li}}</li>'
    });
    new Vue({
        el:"#app",
        data:{
            items:['java','php','linux','mysql']
        }
    })
</script>

v-for=“item in items”：遍历Vue实例中定义的名为items的数组，并创建同等数量的组件
v-bind:li=“item”：将遍历的item项绑定到组件中props定义名为item属性上；= 号左边的panh为props定义的属性名（随便定义的），右边的为item in items 中遍历的item项的值

Axios通信

Axios是一个开源的可以用在浏览器端和NodeJS 的异步通信框架，她的主要作用就是实现AJAX异步通信，其功能特点如下:

• 从浏览器中创建XMLHttpRequests
• 从node.js创建http请求
• 支持Promise API [JS中链式编程]
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换JSON数据
• 客户端支持防御XSRF (跨站请求伪造)

第一个Axios应用程序

开发的接口大部分都是采用JSON格式， 可以先在项目里模拟一段JSON数据， 数据内容如下：创建一个名为data.json的文件并填入上面的内容， 放在项目的根目录下

data.json

{
  "name": "Java",
  "url": "https://www.lihongrui.xyz",
  "page": 1,
  "isNonProfit": true,
  "address": {
    "street": "汾阳",
    "city": "山西汾阳",
    "country": "中国"
  },
  "links": [
    {
      "name": "bilibili",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "Java",
      "url": "https://www.lihongrui.xyz"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

测试代码

<div id="vue" v-cloak>

    <p>
        姓名:{{info.name}}
    </p>
    <a v-bind:href="info.url">
        点我
    </a>
    <p>
        地址:{{info.address.city}}{{info.address.street}}
    </p>

</div>

<script type="text/javascript">
    new Vue({
        el:vue,
        data() {
            return {
                info:{
                    name:null,
                    url:null,
                    address: {
                        street: null,
                        city: null,
                    }
                }
            };
        },
        mounted() {//钩子函数
            axios.get("../data.json").then(Response=>(this.info=Response.data))
        }
    })
</script>

说明：

• 在这里使用了v-bind将a:href的属性值与Vue实例中的数据进行绑定
• 使用axios框架的get方法请求AJAX并自动将数据封装进了Vue实例的数据对象中
• 我们在data中的数据结构必须和Ajax响应回来的数据格式匹配！

计算属性、内容分发、自定义事件

计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数：简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已；可以想象为缓存!

<div id="app">
    <p>
        {{trim()}}
    </p>
    <p>
        {{trim2}}
    </p>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
<script>
    var vm = new Vue({
        el:"#app",
        data:{
          msg:'我是大傻逼',
        },
        methods:{
            trim:function () {
                return new Date().toLocaleString();
            }
        },
        computed:{
            trim2:function () {
                this.msg;
                return new Date().toLocaleString();
            }
        }
    });
</script>

注意：methods和computed里的东西不能重名
说明：

• methods：定义方法， 调用方法使用currentTime1()， 需要带括号
• computed：定义计算属性， 调用属性使用currentTime2， 不需要带括号：this.message是为了能够让currentTime2观察到数据变化而变化
• 如何在方法中的值发生了变化，则缓存就会刷新!可以在控制台使用vm.msg=”我是二傻逼"， 改变下数据的值，再次测试观察效果!
  结论：
  调用方法时，每次都需要讲行计算，既然有计算过程则必定产生系统开销，那如果这个结果是不经常变化的呢?此时就可以考虑将这个结果缓存起来，采用计算属性可以很方便的做到这点，计算属性的主要特性就是为了将不经常变化的计算结果进行缓存，以节约我们的系统开销；