Vue：学习笔记-介绍

栏目: JavaScript · 发布时间: 6年前

内容简介：17年上半年，学习了一些Vue的知识，但是现在反观回去，感觉在那个时候，因为着急做项目，很多东西消化的不够清楚，这一点同样体现在对angular的学习上，现在有点时间进行修整，那就花点时间去好好整理一下。大体翻译：Vue是一个进步的框架（progressive framework），用来构建用户界面。它不像别的大而全的框架，由很小的部分，逐步增量吸收完善。它的核心库仅仅专注于view层，很容易使用，或者说是和项目的其他库集成。这段前言，好像是第一次这么清楚地读明白，枉费了作者的一番心血。

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 id="app">
  {{ message }}
</div>

js文件中：

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

绑定元素属性

<div id="app-2">
  <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 id="app-3">
  <span v-if="seen">Now you see me</span>
</div>

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

循环

<div id="app-4">
  <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 id="app-5">
  <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 id="app-6">
  <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 id="app-7">
  <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' }
    ]
  }
})

以上所述就是小编给大家介绍的《Vue：学习笔记-介绍》，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对码农网的支持！

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

CSS3 For Web Designers

Dan Cederholm / Happy Cog / 2010-11 / $18

From advanced selectors to generated content to the triumphant return of web fonts, and from gradients, shadows, and rounded corners to full-blown animations, CSS3 is a universe of creative possibilit......一起来看看《CSS3 For Web Designers》这本书的介绍吧!

码农工具