Vue基础入门

这里作为一个八股文，到时候面试的时候扫盲，在回来考古一下。


npm是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下集中：

• 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
• 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
• 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。

渐进式的含义：主张最少, 没有多做职责之外的事

Vue 有些方面是不如 React，不如 Angular.但它是渐进的，没有强主张， 你可以在原有系统的上面，把一两个组件改用它实现，当 jQuery 用；

也可以整个用它全家桶开发，当 Angular 用；还可以用它的视图，搭配你自己设计的整个下层用。

你可以在底层数据逻辑的地方用 OO 和设计模式的那套理念，也可以函 数式，都可以，它只是个轻量视图而已，只做了自己该做的事，没有做 不该做的事，仅此而已。

前后端分离

前后端分离时前端项目和后端项目运行在不同的服务器上，前端和后端的服务器之间进行通信获取数据。普遍的，前端项目使用vue或react进行编写，运行在nginx服务器上。后端项目使用springboot，运行在tomcat服务器上。

前后端服务器通信的实现方式是使用ajax这门技术，在Vue中对官方推荐使用的是axios技术，是对ajax的一个封装增强，本质上还是ajax。这门技术前后端都必须要掌握，十分重要。

前端服务器向后端服务器接口发送ajax请求，获取数据，使用vue框架，将数据渲染在页面上。

后端编写api接口，接受前端请求，将查询出来的数据封装起来返回给前端服务器。

至此，前端人员只需要编写页面，发送请求，获取数据，渲染页面。后端人员只需要编写接口，接受请求，处理业务，数据持久化。做到了前后端各司其职，高效开发。

数据双向绑定

单向数据绑定

指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。
单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。 简单的来说就是DOM操作直接改变

数据数据双向
数据模型（Module）和视图（View）之间的双向绑定。
用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。双向数据绑定的优点是无需进行和单向数据绑定的那CRUD（Create，Retrieve，Update，Delete）操作双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

基础命令

基础用法

<div id="app">
  <h1>{{ message }}h1>
  <h1>{{ list[2] }}h1>
  <h1>{{ dict.nihao }}h1>
div>
1
2
3
4
5

var app = new Vue({
  el: '#app',    //绑定的id
  data: {
    message: 'Hello Vue!',
    list: [1,2,3,4],
    dict: {
        1:this.message,
        nihao:'wohao'
    }
  }
  methods:{
    add:funtion(){
  		this.list[0] += 1  
	}
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

v-on

v-on：处理用户输入

@keyup.enter = "methods"
v-on:click="reverseMessage"
1
2

eg

<div id="app-5">
  <p>{{ message }}p>
  <button v-on:click="reverseMessage">反转消息button>
div>
1
2
3
4

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')  //翻转消息
    }
  }
})
1
2
3
4
5
6
7
8
9
10
11

v-if

v-if：根据表达式的真假，切换元素的显示和隐藏（这里的隐藏是指直接删除了dom）操控dom消耗资源较大。

v-if="true"
v-if="isShow"
v-if="表达式"
1
2
3

eg:

<div id="app-3">
  <p v-if="seen">现在你看到我了p>
div>
1
2
3

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
})
1
2
3
4
5
6

v-bind

v-bind：设置元素的属性,可以让鼠标悬停时显示的内容

v-bind：属性名=表达式
v-bind:src="imgSrc"
v-bind:title="imgtitle+'!!!!'"
v-bind:class="isActive?'active':"""
v-bind:class="{active:isActive}"
1
2
3
4
5

eg:

<div id="app-2">
  <span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  span>
div>
1
2
3
4
5

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: '页面加载于 ' + new Date().toLocaleString()
  }
})
1
2
3
4
5
6

v-for

根据数据生成列表结构

场合数组结合使用

v-for = "it in arr"
v-for = "(it,index) in arr"
v-for = "(key,value,index) in dict"
1
2
3

eg:

<div id="app-4">
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    li>
  ol>
div>
1
2
3
4
5
6
7

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})
1
2
3
4
5
6
7
8
9
10

v-model

获取和设置表单元素的值（双向数据绑定）

• 便捷的设置和获取表单元素的值
• 绑定的数据会和表单元素想关联
• 绑定的数据<>表单元素的值

eg：

<div id="app-6">
  <p>{{ message }}p>
  <input v-model="message">
div>
1
2
3
4

var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})
1
2
3
4
5
6

组件化应用构建

组件系统是 Vue 的另一个重要概念，因为它是一种抽象，允许我们使用小型、独立和通常可复用的组件构建大型应用。仔细想想，几乎任意类型的应用界面都可以抽象为一个组件树：

这里我的理解就是自定义组件名，类似泛型编程

<div id="app-7">
  <ol>
    
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id"
    >todo-item>
  ol>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

Vue.component('todo-item', {
  props: ['todo'],
  template: '
{{ todo.text }}
'
})

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: '蔬菜' },
      { id: 1, text: '奶酪' },
      { id: 2, text: '随便其它什么人吃的东西' }
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

与自定义元素的关系

1. Web Components 规范已经完成并通过，但未被所有浏览器原生实现。目前 Safari 10.1+、Chrome 54+ 和 Firefox 63+ 原生支持 Web Components。相比之下，Vue 组件不需要任何 polyfill，并且在所有支持的浏览器 (IE9 及更高版本) 之下表现一致。必要时，Vue 组件也可以包装于原生自定义元素之内。
2. Vue 组件提供了纯自定义元素所不具备的一些重要功能，最突出的是跨组件数据流、自定义事件通信以及构建工具集成。

vue和flask进行通信

axios：ajax的升级版

get请求

var app = new Vue({
    el:"#aPP",
    data:{
        joke:"搞笑的笑话"
    },
    methods:{
        getJokes:function(){
            
            var that = this;
            //this.joke
            axios.get("地址").then(function(response){
            	//this.joke?
              that.joke = response.data;
            }, function(err){});
        }
    }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

axios回调函数中的this已经改变，无法访问到data数据，因此这里我们把this保存起来，回调函数中直接使用保存的this即可。

post请求

new Vue({
  el: '#app',
  data () {
    return {
      info: null
    }
  },
  mounted () {
    axios
      .post('https://www.runoob.com/try/ajax/demo_axios_post.php', 
            {
    			firstName: 'Fred',
    			lastName: 'Flintstone'
  			}
       )
      .then(response => (this.info = response))
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}
 
function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}
axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));
1
2
3
4
5
6
7
8
9
10
11