vue.js初学入门教程（1）

非常感谢您对本站教程的关注，以下是本站的vue.js初学入门教程（1）的完整攻略。

教程过程

1. 引入vue.js

在HTML页面中引入vue.js，可以下载后自己放在项目中，也可以使用CDN链接。例如：

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

2. 创建vue实例

通过在JavaScript中创建Vue实例来构建应用。例如：

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

在这个例子中，我们创建了一个名为app的Vue实例，并将其挂载到HTML页面中的id为app的元素上。同时定义该实例的数据属性message，其值为'Hello Vue!'。

3. 使用指令渲染数据

使用Vue指令将数据渲染到HTML页面中。例如：

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

在这个例子中，我们在div元素中使用了一条Vue指令{{ message }}。这条指令为模板语法，表示将实例中的数据属性message插入到div元素中。当Vue实例被创建时，它会将数据属性message的值替换到模板中，最终渲染到HTML页面上。

至此，您已经完成了vue.js初学入门教程（1）的学习。更多关于Vue实例、指令等内容请参阅官方文档。

示例说明1：计数器

这个示例展示了如何使用vue.js来实现一个简单的计数器。代码如下：

<div id="app">
  <p>{{ count }}</p>
  <button v-on:click="increment">+1</button>
  <button v-on:click="decrement">-1</button>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    count: 0
  },
  methods: {
    increment: function() {
      this.count++;
    },
    decrement: function() {
      this.count--;
    }
  }
});
</script>

这个例子中，我们创建了一个Vue实例，并定义了一个数据属性count，其初始值为0。在模板中，我们使用Vue指令{{ count }}将count的值渲染到p元素中。同时，在两个button元素中，我们使用了Vue指令v-on:click来监听用户的点击事件，当用户点击button时，会执行increment或decrement方法，从而修改count的值。

示例说明2：待办事项列表

这个示例展示了如何使用vue.js来实现一个简单的待办事项列表。代码如下：

<div id="app">
  <h3>待办事项列表</h3>
  <ul>
    <li v-for="todo in todos" v-bind:key="todo.id">
      {{ todo.title }}
    </li>
  </ul>
</div>

<script>
new Vue({
  el: '#app',
  data: {
    todos: [
      { id: 1, title: '学习Vue.js' },
      { id: 2, title: '学习JavaScript' },
      { id: 3, title: '学习HTML/CSS' }
    ]
  }
});
</script>

这个例子中，我们创建了一个Vue实例，并定义了一个数据属性todos，其值为一个数组。在模板中，我们使用Vue指令v-for来遍历数组todos，并将每个数组元素渲染成一个li元素。对于每个li元素，我们使用Vue指令v-bind:key来绑定它们的唯一标识符（在这个例子中，我们使用了数组元素的id属性）。同时，我们使用模板语法{{ todo.title }}来渲染每个li元素的标题。