Vue：学习笔记-介绍

Z时代
2024-01-10
分类：综合

vue

原帖完整收藏于IT老兵驿站，并会不断更新。

前言

17年上半年，学习了一些Vue的知识，但是现在反观回去，感觉在那个时候，因为着急做项目，很多东西消化的不够清楚，这一点同样体现在对angular的学习上，现在有点时间进行修整，那就花点时间去好好整理一下。

正文

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

大体翻译：Vue是一个进步的框架（progressive framework），用来构建用户界面。它不像别的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心库仅仅专注于view层，很容易使用，或者说是和项目的其他库集成。

这段前言，好像是第一次这么清楚地读明白，枉费了作者的一番心血。

如何引入

在你的index.html中引入

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

这个是开发版本，在控制台会有一些有用的输出。

或者：

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

生产版本，优化了大小和速度。

还有一些别的安装帮助，在Installation ，初学者不建议立刻使用vue-cli（类似一个脚手架），这样你会搞不清原理，但我相信，大多数的人还是会立刻去使用这个，因为立刻可以做出一些东西来，能做出东西来就行，谁会在意什么原理不原理呢？

陈述式的渲染

直接渲染数据到DOM树：

html文件中（下文中，上面的代码段都表示是在html文件中，下面的代码段表示是在js文件中，可以在这个在线模拟器上进行尝试）：

<div >
  {{ message }}
</div>

js文件中：

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

绑定元素属性

<div >
  <span v-bind:title="message">
    Hover your mouse over me for a few seconds
    to see my dynamically bound title!
  </span>
</div>

var app2 = new Vue({
  el: '#app-2',
  data: {
    message: 'You loaded this page on ' + new Date().toLocaleString()
  }
})

条件和循环

条件

<div >
  <span v-if="seen">Now you see me</span>
</div>

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

循环

<div >
  <ol>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ol>
</div>

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: 'Learn JavaScript' },
      { text: 'Learn Vue' },
      { text: 'Build something awesome' }
    ]
  }
})

处理用户输入

<div >
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">Reverse Message</button>
</div>

var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

<div >
  <p>{{ message }}</p>
  <input v-model="message">
</div>

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

用组件来构成

组件的概念，是一个预定义好的一些选项的Vue的实例。

定义一个组件，语法如下：

// Define a new component called todo-item
Vue.component('todo-item', {
  template: '<li>This is a todo</li>'
})

其实，这个就相当于自定义了一个HTTP元素，并且这个元素是在js中得到解释的，解释成HTML原生的元素。这样可以把它组装在另外一个组件的模板里：

<ol>
  <!-- Create an instance of the todo-item component -->
  <todo-item></todo-item>
</ol>

但是这样，这个组件的内容是固定的，这样没有太大意义，所以，这个内容应该是一个变量，由使用者来定义，所以，这里又设计一个props，来定义这个变量，如下：

Vue.component('todo-item', {
  // The todo-item component now accepts a
  // "prop", which is like a custom attribute.
  // This prop is called todo.
  props: ['todo'],
  template: '<li>{{ todo.text }}</li>'
})

<div >
  <ol>
    <!--
      Now we provide each todo-item with the todo object
      it's representing, so that its content can be dynamic.
      We also need to provide each component with a "key",
      which will be explained later.
    -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>

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

var app7 = new Vue({
  el: '#app-7',
  data: {
    groceryList: [
      { id: 0, text: 'Vegetables' },
      { id: 1, text: 'Cheese' },
      { id: 2, text: 'Whatever else humans are supposed to eat' }
    ]
  }
})