vue.js入门

Vue.js核心概念速览

Vue.js是一个基于MVVM架构的JavaScript库，用于构建用户界面。它比AngularJS更简洁、易学且灵活。其核心功能包括：

• 数据绑定： 支持单向和双向数据绑定，v-model指令实现双向绑定，模型变化实时反映在视图上。
• 指令和过滤器： 指令用于操作DOM，过滤器用于数据处理。
• 组件化： 创建可复用的自定义HTML元素，提高代码可读性和维护性，使用props属性传递组件属性。

注意：本教程基于Vue.js 1.x版本。Vue 2.x教程请参考其他资源。

将Vue.js添加到页面

推荐使用CDN引入Vue.js：

<code class="language-html"></code>

创建视图模型

Vue.js视图模型使用Vue类创建。视图模型连接数据模型和视图。

示例：

HTML视图：

<code class="language-html"><div id="my_view"></div></code>

数据模型：

<code class="language-javascript">var myModel = {
  name: "Ashley",
  age: 24
};</code>

视图模型：

<code class="language-javascript">var myViewModel = new Vue({
  el: '#my_view',
  data: myModel
});</code>

使用{{ }}语法在视图中显示数据：

<code class="language-html"><div id="my_view">
  {{ name }} is {{ age }} years old.
</div></code>

双向数据绑定

使用v-model指令实现双向数据绑定：

<code class="language-html"><div id="my_view">
  <label for="name">Enter name:</label>
  <input type="text" v-model="name" id="name" name="name">
  <p>{{ name }} is {{ age }} years old.</p>
</div></code>

过滤器

过滤器用于数据处理，使用|符号调用：

<code class="language-html">{{ name | uppercase }}</code>

渲染数组

使用v-for指令渲染数组：

<code class="language-html"><div id="my_view">
  <ul>
    <li v-for="friend in friends">{{ friend.name }}</li>
  </ul>
</div></code>

使用orderBy过滤器排序：

<code class="language-html"><li v-for="friend in friends | orderBy 'age'">{{ friend.name }}</li></code>

使用filterBy过滤器筛选：

<code class="language-html"><li v-for="friend in friends | filterBy 'a' in 'name'">{{ friend.name }}</li></code>

事件处理

在视图模型的methods属性中定义事件处理函数，使用v-on指令绑定事件：

<code class="language-javascript">var myViewModel = new Vue({
  // ...
  methods: {
    myClickHandler: function(e) {
      alert("Hello " + this.name);
    }
  }
});</code>

<code class="language-html"><button v-on:click="myClickHandler">Say Hello</button></code>

创建组件

使用Vue.component方法创建组件：

<code class="language-javascript">Vue.component('sitepoint', {
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a">Sitepoint</a>'
});</code>

使用props属性传递组件属性：

<code class="language-javascript">Vue.component('sitepoint', {
  props: ['channel'],
  template: '<a href="https://www.php.cn/link/aeda4e5a3a22f1e1b0cfe7a8191fb21a/%7B%7B%20channel%20%7C%20lowercase%20%7D%7D">{{ channel }} @Sitepoint</a>',
});</code>

总结

本教程介绍了Vue.js的基本概念，包括数据绑定、指令、过滤器、事件处理和组件创建。 更多高级特性，请参考官方文档。

(后续内容，例如常见问题解答，可以根据需要添加，保持与原文一致性即可。)

以上是vue.js入门的详细内容。更多信息请关注PHP中文网其他相关文章！