记录vue学习过程

vue学习心得

心得过程为跟随bilibili狂神说的vue视频如果喜欢的话请多多支持狂神说，如果有什么错误的地方欢迎指出

# 前言学学vue，听懂掌声！

一、vue？

下边有几个问题你要带着：
什么是mvvm思想（可对比mvc）？
初步了解vue请点击我

上方链接的文章是一个小姐姐的创作，个人认为写得比较好比较全，欢迎参考

二、学习过程

1.初步认识vue的构建思想！

代码如下（示例）：

直接建一个新网页然后运行这段代码，在控制台中修改vm.message的值和dataa的值，你会发现vue的传参方式无需刷新就会更新到界面，而js无法及时更新（只能通过对dom对象的修改或追加才能做到数据的更新），对于前端开发来说vue的这一功能是里程碑式的突破，而且vue还有着解耦合的mvvm思想，孰高孰低高低立判。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->

</head>
<body>
	//这里是view层（一名前端工程师需要做的基础）
    <div id="vueapp">{{vuedata}}"+这里用来验证是否需要拼字符串来显示+" {{asd}}</div>
    <div id="jsapp"></div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#vueapp",
            data: {
            //这里是模型层
                vuedata:"hello data",
                //下面参数来查看vue的传参方式（类似键值对通过key来绑定value并且以{{key的形式绑定到页面元素上}}）
                asd:"第二份",
            }
        });
        //下面跟传统js代码做对比
        //在网页的控制台修改vm.message的值与dataa的值会发现vue的双重绑定的意义
        var jsdata = "js测试";
        document.getElementById("jsapp").innerHTML=jsdata;
    </script>
</body>
</html>

疑惑：已然有了m（model）层与v(view)层那mv层在哪里啊
个人理解：双向绑定的这种形式就是mv层（抽象含义？）

当然以上并不是真正的vue写法，这只是对这个思想的展示，到了现在我们应该已经认识到：在制作前端的时候我们甚至不需要像之前那样写个假数据等交互的时候再修改（麻烦），我们只需要写个标签并在data里面声明标签的值该动态把值删掉，省去了假数据该动态的时间。

关键词：DOM监听与数据绑定

2.指令

指令带有v-前缀，他们会在dom上应用特殊的响应式行为。例如v-bind

1 2	//放在vueappdiv中展示下面的小作用 <span v-bind:title="new Date()">v-bind样式展示，请鼠标悬停我。</span> </div>

进阶：判断

//放在vueappdiv里
<span v-if="panduan">是对的</span>
<span v-else>是错的</span>
//data同时加个参数
panduan: true,

进阶：循环

//声明div
<div id="vueitems">这个用来测试循环（声明数组）<br>
        <span v-for="item/*便利每一项的命名*/ in items/*便利的数组名*/">{{item.list/*命名.数组名*/}}</span>
        /*<span v-for="(item,index)/*便利每一项的命名*/ in items/*便利的数组名*/">{{item.list}}--下标{{index}}<br></span>*/
    </div>
//js
var vmitems = new Vue({
            el: "#vueitems",
            data: {
                items: [
                    {list:'1'},
                    {list:'2'},
                    {list:'3'},
                ]
            }
        });

循环判断都会了，不直接去干活？奥对，还有事件的监听。（方法必须绑定在method里）

//html
<div id="vueshijian"><button v-on:click="asdd">悬浮我</button><br><span>{{message}}</span> </div><br>
//js
var vmon = new Vue({
            el: "#vueshijian",
            data: {
                message:"我kiao！",
                asd:"这是点击事件",
                panduan: true,
                suanshu:"这是悬浮事件",
            },
            methods: {
              asdaa:function () {
                alert(vmon.suanshu);
              },
              asdd:function () {
                alert("我是第二个方法");
              }
            }

        });

没啥心得就是基本事件

3.axios（异步请求）

因为vue是面向前端的，所以引入一个网络方面功能

// An highlighted block
//导入js
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
//html
<div id="axios" v-clock>
    <span>{{info.name}}</span>
</div>
//js
<script>
    var vm = new Vue({
        el:"#axios",
        data(){
            return{//请求的返回参数格式，必须和json字符串一样。
                info:{name: null},
            }
        },
        mounted(){//钩子函数 链式编程
            axios.get('data.json').then(response=>(this.info = response.data));//这个地方难理解axios.get('请求地址').then(response=>(this.info = response.data))
        },
    })
</script>
//建立一个叫做data.json的文件放在一个根目录下（文件内内容如下）
{
  "name":"学vue",
  "url": "http://vue.js.com",
  "page": "1",
  "isNonProfit":"true",
  "address": {
    "street": "街",
    "city":"城",
    "country": "国"
  },
  "links": [
    {
      "name": "B站",
      "url": "https://www.bilibili.com/"
    },
    {
      "name": "4399",
      "url": "https://www.4399.com/"
    },
    {
      "name": "百度",
      "url": "https://www.baidu.com/"
    }
  ]
}

vue心得