Vue.js学习记录第一天

作者: 大白熊_8133 | 来源:发表于2018-11-19 21:19 被阅读0次

Vue.js学习记录第一天
Vue.js学习记录
vue.js学习记录
vue 动画的挂载方式
Vue.js入门-Vue实例
Vue.js源码解析 - 2.x
开启第一天
2019-06-15
2019-08-08
前端基础知识学习---Vue.js学习（一）模板语法

vue数据驱动

vue主要操作的是数据

数据类型

基本 number string boolean null undefined
Object function
Symbol（es6）

对象{ } 数组[]

数组的变异（括号中能改变原数组）

操作数组的方法
es4：(pop push unshift前面增加 shift前面减少 splice reverse sort )indexOf lastIndexof concat（拼接数组）slice
es5

forEach filter map some every reduce includes find

前面都有不赘述

框架和库

框架 vue
库 jquery underscore
框架和库的区别，框架拥有完整的解决方案，我们写好框架调用我们的，库是我们调用他

vue.js是渐进式的

通过组合完成一个完整的框架
vue全家桶核心为vue.js+vue-router(单页应用)+vuex（状态管理）+axios（获取数据）

vue特点

核心只关注图层
轻量，灵活
适用于移动端
渐进式框架

渐进式

声明式渲染（不关系怎么实现的）

组件系统

客户端路由（vue-route）

大规模状态管理（vuex）

构建工具（vue-cli）

核心店

响应的数据变化
当数据发生变化，视图自动更新

MVC(backbone) 单向的

model 数据

view 视图

controller 控制器
控制器获取数据->传递给业务模型->渲染视图->反馈给用户

MVVM(angular,vue) 双向的

model数据 plan JavaScript Object 计划好的JS对象

view视图是DOM

viewModel 视图模型
view-> view model DOM listensers实时映射->model
model->view model 中data binding->view

组合的视图组件
UI页面映射为组件树
划分组件可维护，可复用，可测试

安装vue

通过cdn

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

第一个程序

按照之前的介绍，首先需要一个视图模型

let vm=new Vue()

然后需要将View控制的DOM告诉它

  let vm=new Vue({
    el:'#app'})

然后是VM代理的数据

  let vm=new Vue({
    el:'#app',
    data:{msg:'大白熊'}
  });

最后将数据在页面显示

    <div id="app">
      {{msg}}
    </div>

全部程序

  <body>
    <div id="app">
      {{msg}}
      <!--这里换行会出现问题-->
    <!--希望在页面中展示data-->
    <!--moustache语法，表达式，可以放赋值，取值，三元-->
    </div>
  </body>
  <script>
  //vue的构造函数，看到构造函数就总是要new
  let vm=new Vue({
    el:'#app',
    //element,告诉它当前归view管理的DOM,只能挂载在普通的元素上，html和body不行
    data:{msg:'大白熊'
    //data中的数据会被VM所代理，可以通过vm.msg取到对应的内容
    }
  });

视图控制数据

现在只能数据控制视图，还做不到视图控制数据

input
checkbox
textarea
radio
select
这里需要用到vue的指令

vue的指令

只是dom的行间属性，vue给这类属性赋予了一定的意义。来实现特殊的功能，所有的指令都以v-开头

现在需要将页面上的数据传递到VM中，以input框举例

  {{msg}}
  <input type="text" v-model="msg">
<!-- 先将数据写入输入框，再改变输入框后，改变数据-->

这时改变input中的值，页面上的值也会改变
值得注意的是
value,checked,selected属性一般会被vue忽略
vue没有大写的属性
v-model会将msg的值赋予输入框，输入框的值影响数据
数据改变input中的值也会改变

defineProperty

为对象定义属性

let obj={}
Object.defineProperty(obj,'name',{
configurable:false,//是否可删除
writable:false,//是否可重新赋值
enumerable:false,//是否可枚举
value:1//值
get(){
//取obj的name属性会触发
return value；
},
set(val){
//给obj赋值会触发set方法

}
})
//obj {"name":1}

基本指令

1. v-text==={{}}
代码从上到下执行，{{msg}}会先执行，然后vm再渲染，利用v-text可以解决这个问题

<div id="app" v-text="msg"></div>

msg这里也可以写表达式
2. v-once
只绑定一次，数据再次变化，页面不会刷新

<div v-once>
{{msg}}
</div>

v-once不用赋值
3. v-html
把html字符当作html渲染,一定是可以信任的html
直接

{{p}}

输出在页面上的会是

<p>大白熊</p>

不符合我们的要求
所以需要

<div v-html="p"></div>

4. v-if
v-if指令是根据表达式的值来决定是否插入页面元素
v-else
v-else-if
和v-if搭配使用

<div id="app">
   <div v-if="type==='A'">A</div>
   <div v-else-if="type==='B'">B</div>
   <div v-else-if="type==='C'">C</div>
</div>
<script>
let VM=new Vue({
el:"#app",
data:{
type:'C'
}
})
</script>

5. v-show
根据表达式的布尔值，决定是否显示页面元素
6. v-for
可以绑定一组数据来渲染一个列表
表达式有以下几种形式

site in sites sites 是源数据数组并且 site 是数组元素迭代的别名

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'aaa' },
      { name: 'bbb' },
      { name: 'ccc' }
    ]
  }
})
</script>

value in object 对象的属性

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: 'aaa',
      age: 12,
    }
  }
})
</script>

(value, key) in object

<div id="app">
  <ul>
    <li v-for="(value, key) in object">
    {{ key }} : {{ value }}
    </li>
  </ul>
</div>

(value, key, index) in object

<div id="app">
  <ul>
    <li v-for="(value, key, index) in object">
     {{ index }}. {{ key }} : {{ value }}
    </li>
  </ul>
</div>

n in 10 循环整数

数据响应的变化

对象

使用变量前先要初始化，否则新加的属性并不会导致页面刷新
如果{{}}中是VM data中不存在的项，会报错
如果是存在的项不存在的属性，不会报错
但是这时给这个属性赋值并不会有效果
vue会循环data中的数据（数据劫持）,以此增加getter和setter

    <div id="app">
      {{a.school}}
      <!--如果不存在a会报错，但是调用a不存在的属性并不会-->
      <!--vue会循环data中的数据（数据劫持）,以此增加getter和setter-->
      <!--但是如果这时给school赋值也并不会改变页面-->
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue(
      el:"#app",
      data:{
        a:{}
      }
      )

这时给school赋值也不会有更新

对于不存在的属性，想要增加属性使用

vm.$set(vm.a,'school',1)

第一个变量是对象，第二个是增加的属性，第三个是数据

替换原对象

vm.a={school:"1",age:"8"}

数组

想要取固定位置的项，可以直接取

<div id="app">
{{arr[1]}}
</div>

在script直接改变数组相应位置的项，监控不到
同理长度也不会

    <div id="app">
      {{arr}}
      </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
      el:"#app",
      data:{
        arr:[1,2,3,4,5]
      }}
      )
      vm.arr[0]=100
      console.log(vm.arr)
      //显示是[1,2,3,4,5]，但是console.log()是[100,2,3,4,5]
    </script>

利用变异方法可以改变页面显示的数组

let vm=new Vue({
      el:"#app",
      data:{
        arr:[1,2,3,4,5]
      }}
      )
      vm.arr[0]=100
      console.log(vm.arr)
      //显示是[1,2,3,4,5]，但是console.log()是[100,2,3,4,5]
      //变异方法:pop push shift unshift sort reverse splice 利用这些方法可以修改页面中显示的项
      //如果是利用不修改的方法，重新赋值即可
      vm.arr.reverse();
      //而且这时的数组是经过了改变项目的 输出为[5,4,3,2,100]

也可以重新赋值

  vm.arr=vm.arr.map(item=>item+3)

数组的循环

v-for会更高效解决循环问题，复用原有结构
v-for这里的值是随便一个名称 in xxx,这里xxx是data中属性名称，比如例子中的animals
{{}}中是v-for第一个名称.属性值，不能直接用数组中属性名称，例子中 animals.name会无显示
和forEach相似，例子中a就相当于item

    <div id="app">
      <ul>
        <li v-for="a in animals">  {{a.name}}</li>
        <!--循环谁在谁身上加v-for属性，这里要循环的是li不是ul-->
        </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        data:{
          animals:[{"name":"大白熊"},{"name":"北极熊"},{"name":"企鹅"}]
        }
      }
      )

(a,index) in animals也可以
in 替换成of 也可以

层叠式的列表

当数组的每一项有另一个数组时，也可以生成新的子列表

    <div id="app">
      <ul>
        <li v-for="(animal,index) in animals">{{index+1}}.{{animal.name}}
          <ul>
            <!--这里index的值还是上一步的，所以index名需要换一个-->
            <li v-for="(age,index2) in animal.age">
              {{index+1}}.{{index2+1}}.{{age}}
            </li>
          </ul>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        data:{
          animals:[{"name":"大白熊","age":[12,2,5]},{"name":"北极熊","age":[25,4,8]},{"name":"企鹅","age":[2,8,15]}]
        }
      }
      )

一般情况下不会出现三维数组

字符串,数字和对象的循环

<div v-for="c in 'aaa'">{{c}}</div>
<div v-for="c in5">{{c}}</div>
<div v-for="(value,key,index) in obj">{{index+1}}.{{key}}:{{value}}</div>

事件

原生点击事件

    <!--所有的事件函数都要是在window上的-->
    <div id="app" onclick="fn()">点击事件</div>
    <!--必须要加()才能执行函数-->
    <script>
      function fn()
      {
        alert("点击")
      }
    </script>

vm事件
v-on:事件名称=""
事件名称可以使click，mouseon，mousedown等
method和data全部数据都会放在VM中所以名字不能冲突，method中的this指向的都是实例，返回的数据会是data中的数据
事件函数不能重复定义，会报错

    <div id="app">
      <div v-on:click="fn"></div>
      <!--传参加括号，不传参不加,否则会自动传为事件源-->
      <!--需要传event的时候用$event-->
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      let vm=new Vue({
        el:"#app",
        methods:{
          fn(){alert("click")}
        },
        data:{
          //为了区分，这里全部放数据
          //fn不要重复定义
        }
      })

v-on简写为@

  <div @click="fn"></div>

传参加括号，不传参不加,否则会自动传为事件源
需要传event的时候用$event

实例

现在做一个可增添删减的列表，点击回车将数据input上的数据传递到VM中，然后更新列表
三个部分

输入数据的input
列表
删除键

input部分

<input type="text" v-model="newitem" @keyup="addnew">

增加完毕后
需要在methods中定义按下回车时的函数，这里methods必须是methods少打s会报错

          addnew(event){
            if(event.key=="Enter")
            {
              this.animals.push(this.newitem)
            }
          }

同时data中需要有animals和newitem

        data:{
          newitem:"",
          animals:["大白熊","兔子","狼"]
        }

列表

简单的v-for构建的列表

      <ul>
        <li v-for="(animal,index) in animals" style="line-height:60px;">
          {{animal}}
        </li>
        </ul>

此时添加功能就已经完成了

删除功能

在每个li中加入一个按键，点击时调用函数，给这个函数传入index函数，再利用filter将符合的值剔除掉
注意filter并不会改变原来的数组，所以需要利用赋值改变原来的数组

      <ul>
        <li v-for="(animal,index) in animals" style="line-height:60px;">
          {{animal}}<button style="margin-left:30px" @click="del(index)">删除</button>
        </li>
        </ul>

函数部分

          del(i){
            let newanimals=this.animals.filter((item,index)=>index!=i)
            this.animals=newanimals
          }

为了完善功能简单的加入了遍历数组弹出已经有的项以及空项警告

          addnew(event){
            if(event.key=="Enter")
            {
              if(this.newitem=="")
              {
                alert("空项")
                return
              }
            else if(this.animals.includes(this.newitem))
              {
                alert(this.newitem+"已经存在")
                return
              }
            else {
                this.animals.push(this.newitem)
              }

            }
          }

还有一种检测按下键盘按键的方法

<input type="text" v-model="newitem" @keydown.enter>

多个按键也可以

<input type="text" v-model="newitem" @keydown.ctrl.enter>
``

Vue.js学习记录第一天
vue数据驱动 vue主要操作的是数据数据类型基本 number string boolean null un...
Vue.js学习记录
页面渲染的问题: 1，正常情况下渲染页面是这么写的 vue是这么写 :src 其实是vue里 v-bind:的缩写...
vue.js学习记录
一、vue-cli的使用方法安装vue ：** npm install vue** 安装vue-cli：npm ...
vue 动画的挂载方式
声明该文章仅用于个人学习，文中内容均来在 vue.js 官网，在此记录只是便于个人的理解 Vue.js 官网(下...
Vue.js入门-Vue实例
Vue.js 热度一直在上升，项目中也使用了这个框架，记录一下学习的过程。摘自官方说明：“Vue.js（读音 /...
Vue.js源码解析 - 2.x
前言本篇为学习笔记，记录在慕课vue.js源码解析教学视频中学习到的知识。一、准备工作在本章节,将会介...
开启第一天
第一天使用，开启第一天的学习与记录！
2019-06-15
Node.js、Vue.js 运行环境搭建记录参考链接：Vue.js 运行环境搭建详解（基于windows的手把...
2019-08-08
来简书第一天，记录学习过程。
前端基础知识学习---Vue.js学习（一）模板语法
Vue.js学习笔记 Vue.js的使用之HelloWord 引入Vue.js 创建Vue对象其中el：指定根el...