Vue学习日记

Vue介绍

学Vue之前，必须会HTML CSS JS(javascript)
是一个国人开发，尤雨溪，目前就职阿里巴巴

玩一个框架，首先你得下载下来吧，不管前端后端，复制图中的连接地址，在浏览器打开，然后Ctrl + S 保存

版本号，等信息，

当然这个开发环境，生产环境在下面

这里，也可以,用npm安装

MVVM模式

MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）
Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷

Vue入门程序

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 这里引入的是网址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <!-- Vue中的插值表达式，把data定义的数据显示在此处 -->
      {{ message }}
    </div>
  <script>
    //View model
    // 创建Vue对象
    new Vue({
      el:"#app", //由Vue接管id 为 app的区域
      data:{
          message:"hello vue", //不能加 ; 号
      }
    });
  </script>
</body>
</html>

插值表达式
数据绑定常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，Mustache 标签将会被替代为对应数据对象上属性的值。无论何时，绑定的数据对象上属性发生了改变，插值处的内容都会更新
Vue.js 都提供了完全的 JavaScript 表达式支持。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 这里引入的是网址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      {{ message }}
      {{ true ? "ok" : "no"}}
    </div>
  <script>
    new Vue({
      el:"#app", 
      data:{
          message:"hello vue", 
      }
    });
  </script>
</body>
</html>

可以看见还支持三元

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day01- vue</title>
  <!-- 这里引入的是网址-->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
      <!-- Vue中的插值表达式，把data定义的数据显示在此处 -->
      {{ message }}
      <!-- 三元运算符-->
      {{ true ? "ok" : "no"}}
      <!-- 数学运算 -->
      {{ number*10 }}
      <!-- 插值表达式不支持 -->
      {{ var a = 1; }} 
    </div>
  <script>
    //View model
    // 创建Vue对象
    new Vue({
      el:"#app", //由Vue接管id 为 app的区域
      data:{
          message:"hello vue", //不能加 ; 号
          number:100
      }
    });
  </script>
</body>
</html>

可以看见这里什么也没有，还跟你报了个错

Vue常见指令

v-on:click=" " 这是一个点击事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day02 - vue</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
     <div id="app">
       <!-- 单引号里面一定要套双引号 双引号里面一定要套单引号 -->
       <button v-on:click="test('变换了内容')">{{ message }}</button>
     </div>

<script>
    //View model
    // 创建Vue对象
    new Vue({
        el:"#app", //由Vue接管id 为 app的区域
        data:{
            message:"vue中的点击事件", //不能加 ; 号
        },//这里一定要加逗号
        methods:{
            test:function (msg) {
             alert("adger");
             this.message = msg;
            }
        }
    });
</script>
</body>
</html>

这里bao

这里的el跟data和methods是Vue中的固定语法
其中这里的v-on有一个语法糖

<div id="app">
       <!-- 单引号里面一定要套双引号 双引号里面一定要套单引号 -->
       <button @click="test('变换了内容')">{{ message }}</button>
</div>

vue-on:keydown

看名字就知道是鼠标按下事件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on:keydown</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    vue中的实现方式：<input type="text" v-on:keydown="fun($event)">
    <hr>
    传统js实现方式：<input type="text" onkeydown="showKeyCode()">
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{

       },
       methods:{
        // 这个 $event 它是Vue中的事件对象 和我们传统js的event对象一样的
        fun:function (event) {
            event.preventDefault()
        }
       }
    });
    //传统js 键盘按下事件
    function showKeyCode() {
        //event对象和我们document对象以及window对象是一样的，可以不用定义直接使用
        var keyCode = event.keyCode;
        // 键盘按下的事件对应一个 字符编码 比如 回车 是 13
        // alert(keyCode)
        
        // 如果小于48 大于 57 编码的键盘对象 输入 不了 其他的 只能输入这个范围之内的
        if(keyCode < 48 || keyCode > 57){
          //不让 键盘 起作用
          event.preventDefault();
        }
        // 如果按的是 回车 就弹出这句话
        if(keyCode == 13){
          alert("你按的是回车")
        }
    }
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on 按键修饰符</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 如果按回车 就弹出下面的方法 .enter嘛 不按 回车就不触发那个方法 -->
    vue : <input type="text" v-on:keydown.enter="fun()">
    vue : <input type="text" @keydown.enter="fun()">
  </div>
  <script>
    new Vue({
      el:"#app",
      methods:{
          fun:function () {
              alert("按下的是回车");
          }
      }
    });
  </script>
</body>
</html>

v-on:mouseover

这里有一个事件得注意就是，有一个事件传播性

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-on:mouseover</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    /*
      好区分div的区域
    */
    div{
      width: 300px;
      height: 300px;
    }
    .div1{
      background-color: red;
    }
    .div2{
      background-color: blue;
    }
  </style>
</head>
<body>
  <div id="app">
    <div v-on:mouseover="fun1" class="div1">
      <textarea v-on:mouseover="fun2($event)">这是一个文件域</textarea>
    </div>

    <hr>
    传统的 js 方式
    <div onmouseover="divMouseOver()" class="div2">
      <textarea onmouseover="textArea()">这是一个文件域</textarea>
    </div>
  </div>

<script>
  new Vue({
     el:"#app",
     methods:{
      fun1:function () {
       alert("鼠标悬停在这个div上");
      },
      // 这里为什么 需要加 event呢 因为 你需要阻止事件传播，所以需要一个阻止人 对不对
      // 下面传统 js 实现 方式 是不需要 加 是因为 本身 就存在 只需要我们 去调用即可
      fun2:function (event) {
          alert("鼠标悬停在textarea上");
          event.stopPropagation();
      }
     }
  });


  //传统 js 方式
  function divMouseOver() {
      alert("鼠标移到到div上")
  }
  
  function textArea() {
      alert("鼠标移动到textArea上")
      //防止关联事件 传播 因为这里textarea文本域 是放在div里面的
      event.stopPropagation();
  }
</script>
</body>
</html>

事件修饰符

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day05-vue 事件修饰符</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <style>
    .div1{
      width: 400px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="app">
    vue 的 阻止 表单提交
    <form v-on:submit.prevent action="https://www.baidu.com" method="get">
      <input type="submit" value="提交">
    </form>
    <hr>
    传统 js 的 阻止表单提交方式                            <!-- 传统js 必须return此方法 才能阻止-->
    <form action="https://www.baidu.com" method="get" onsubmit="return checkForm()">
      <input type="submit" value="提交">
    </form>

    <div v-on:mouseover="fun1" class="div1">
      <!-- 这里.stop 放上相当于一个属性 -->
      <textarea v-on:mouseover.stop="fun2($event)">这是一个文件域</textarea>
    </div>
  </div>

<script>
  new Vue({
     el:"#app",
     methods:{
          fun1:function () {
              alert("鼠标悬停在这个div上");
          },
          fun2:function (event) {
              alert("鼠标悬停在textarea上");
          }
      }
  });
  //传统 js方式
  function checkForm() {
      // 表单验证必须有一个明确的boolean 类型
      //在 提交验证方法时必须加上 return 方法名称
      return false;
  }
</script>
</body>
</html>

v-text和v-html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    vue 方式
    <div id="div1" v-html="message"></div>
    <div id="div2" v-text="message"></div>
    <hr>
    传统 js 方式
    <div id="div3"></div>
    <div id="div4"></div>
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{
           message:"<h1>adger</h1>",
       }
    });
    // 传统 js 的 innerText 和 innerHTML
    window.onload = function () {
        document.getElementById("div3").innerHTML = "<h1>hello</h1>"
        document.getElementById("div4").innerText = "<h1>hello</h1>";
    }
  </script>
</body>
</html>

v-bind

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>day07 v-bind</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 这是两个错误示范 -->
    <font size="3" color="{{ color1 }}">我是adger</font>
    <font size="3" color="{{ color2 }}">我是哈哈</font>
    <hr>
    <font size="3" v-bind:color="color1">我是adger</font>
    <font size="3" v-bind:color="color2">我是哈哈</font>
    <hr>
    <font size="3" :color="color1">简化方式</font>
  </div>
<script>
    // 插值表达式不能用于html 标签的属性取值
    // 要想给 html 标签的属性设置变量的值，需要使用 v-bind 也可以简化 直接 :
    new Vue({
       el:"#app",
       data:{
         color1:"red",
         color2:"green"
       },
    });
</script>
</body>
</html>

v-for 使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍历数组</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <!-- v-for 变量名 in 取出 数据中的数组名字  -->
      <li v-for="(item,index) in arr">{{ item }} === 索引 === {{ index }}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
          arr:[1,2,3,4,5],
      }
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍历数组</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <ul>
      <li v-for="(key,value) in product">{{ value }} ==== {{ key }}</li>
    </ul>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
          product:{
            id:1,
            name:"笔记本电脑",
            price:5000
          },
      }
    });
  </script>
</body>
</html>

注意这里是个反的

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-for 遍历数组</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
  <ul>
    <table border="1">
      <tr>
        <td>编号</td>
        <td>名称</td>
        <td>价格</td>
      </tr>
      <tr v-for="(item,index) in products">
        <td>{{ item.id }}</td>
        <td>{{ item.name }}</td>
        <td>{{ item.price }}</td>
      </tr>
    </table>
  </ul>
</div>
<script>
    new Vue({
        el:"#app",
        data:{
            products:[
            {id:1,name:"笔记本电脑", price:5000},
            {id:2,name:"手机", price:2000},
            {id:3,name:"电视", price:2000},
            {id:4,name:"苹果", price:15000},
          ],
        }
    });
</script>
</body>
</html>

v-model

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 错误示范 -->
    <form action="" method="post">
      用户名： <input type="text" name="username" value="user.username"><br>
      密码： <input type="text" name="password" value="user.password">
    </form>
    <hr>
    <!-- 正确示范 -->
    <form action="" method="post">
      用户名： <input type="text" name="username" v-model="user.username"><br>
      密码： <input type="text" name="password" v-model="user.password">
    </form>
  </div>
  <script>
    new Vue({
       el:"#app",
       data:{
          user:{
              username:"adger",
              password:"123"
          }
       },
    });
  </script>
</body>
</html>

v-if 和 v-show

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>v-if 和 v-show</title>
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <!-- 如果下面的值 是 true 就会显示 ，如果是false 就不展示   -->
    <span v-if="flag">adger</span>
    <!-- 这两个 都可以 -->
    <!--<span v-show="flag">刘杰</span>-->
    <button @click="toggle">切换</button>
  </div>
  <script>
    new Vue({
      el:"#app",
      data:{
         flag:false,
      },
      methods:{
          toggle:function () {
              // 这个 flag 一开始 为 false 然后 = 不是false 就变成true
              //再点击一下 从 true 变为false
              this.flag = !this.flag;
          }
      }
    });
  </script>
</body>
</html>

Vue的生命周期

我到Vue 的官网找了一张图，建议学东西在官网看，一个个练习

Vue生命周期展示官网

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>vuejs生命周期</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>

	<body>
		<div id="app">
			{{message}}
		</div>
	</body>
	<script>
		var vm = new Vue({
			el: "#app",
			data: {
				message: 'hello world'
			},
			beforeCreate: function() {
				console.log(this);
				showData('创建vue实例前', this);
			},
			created: function() {
				showData('创建vue实例后', this);
			},
			beforeMount: function() {
				showData('挂载到dom前', this);
			},
			mounted: function() {
				showData('挂载到dom后', this);
			},
			beforeUpdate: function() {
				showData('数据变化更新前', this);
			},
			updated: function() {
				showData('数据变化更新后', this);
			},
			beforeDestroy: function() {
				vm.test = "3333";
				showData('vue实例销毁前', this);
			},
			destroyed: function() {
				showData('vue实例销毁后', this);
			}
		});

		function realDom() {
			console.log('真实dom结构：' + document.getElementById('app').innerHTML);
		}

		function showData(process, obj) {
			console.log(process);
			console.log('data 数据：' + obj.message)
			console.log('挂载的对象：')
			console.log(obj.$el)
			realDom();
			console.log('------------------')
			console.log('------------------')
		}
		// vm.message = "good...";
		vm.$destroy();
	</script>
</html>

vue对象初始化过程中，会执行到beforeCreate,created,beforeMount,mounted 这几个钩子的内容

beforeCreate ：数据还没有监听，没有绑定到vue对象实例，同时也没有挂载对象 created ：数据已经绑定到了对象实例，但是还没有挂载对象
beforeMount: 模板已经编译好了，根据数据和模板已经生成了对应的元素对象，将数据对象关联到了对象的 el属性，el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点 mounted:将el的内容挂载到了el，相当于我们在jquery执行了(el).html(el),生成页面上真正的dom，上面我们就会发现dom的元素和我们el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进行各种操作当我们的data发生改变时，会调用beforeUpdate和updated方 beforeUpdate ：数据更新到dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变 updated: dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的小路径，将改变更新到 dom上面，完成更新 beforeDestroy,destroed :实例的销毁，vue实例还是存在的，只是解绑了事件的监听还有watcher对象数据与view的绑定，即数据驱动

Vue中axios

这个就相当于ajax
vue-resource是Vue.js的插件提供了使用XMLHttpRequest或JSONP进行Web请求和处理响应的服务。当vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios，了解一下vue-resource就可以。
vue-resource的github地址

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中
vue中的axios地址

这里Github先当成一个程序猿的仓库
首先就是引入axios,如果你使用es6，只需要安装axios模块之后

我感觉跟ajax方式很像

Vue介绍

MVVM模式

Vue入门程序

Vue常见指令

vue-on:keydown

v-on:mouseover

事件修饰符

v-text和v-html

v-bind

v-for 使用

v-model

v-if 和 v-show

Vue的生命周期

Vue中axios

面試準備-根據自己簡歷

關於IDEA下載安裝

修改IntelliJ的快捷鍵中的CTRL+Y爲Redo操作爲---快速刪除一行

分頁查詢Demo

Linux的安裝與系統介紹

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結