【前端】vue入门级写法介绍和部分Demo

1. 简单的数据绑定

展示如何使用双大括号语法进行文本插值：

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

2. 条件渲染

使用 v-if 指令来显示或隐藏元素：

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

<script>
new Vue({
  el: '#app',
  data: {
    seen: true
  }
});
</script>

3. 列表渲染

用 v-for 指令遍历数组并渲染列表项：

<ul id="example-1">
  <li v-for="item in items" :key="item.id">{{ item.text }}</li>
</ul>

<script>
new Vue({
  el: '#example-1',
  data: {
    items: [
      { id: 1, text: 'Vue.js' },
      { id: 2, text: 'React' },
      { id: 3, text: 'Angular' }
    ]
  }
});
</script>

4. 表单输入绑定

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

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

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
});
</script>

5. 绑定属性

通过 v-bind 动态设置 HTML 属性：

<a v-bind:href="url">Link</a>

<script>
new Vue({
  el: '#app',
  data: {
    url: 'https://vuejs.org/'
  }
});
</script>

6. 事件处理

监听 DOM 事件并调用方法：

<button v-on:click="increment">Increment</button>

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

7. 计算属性

创建依赖于其他数据属性的计算属性：

<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('');
    }
  }
});
</script>

8. 过滤器（Vue 2）

在 Vue 2 中使用过滤器格式化文本输出（注意：Vue 3 已移除对过滤器的支持）：

<p>{{ message | capitalize }}</p>

<script>
new Vue({
  el: '#app',
  data: {
    message: 'hello vue'
  },
  filters: {
    capitalize(value) {
      if (!value) return '';
      value = value.toString();
      return value.charAt(0).toUpperCase() + value.slice(1);
    }
  }
});
</script>

9. 组件化开发

定义一个简单的自定义组件：

<div id="app">
  <my-component></my-component>
</div>

<script>
Vue.component('my-component', {
  template: '<div>A custom component!</div>'
});

new Vue({ el: '#app' });
</script>

10. 路由基础（Vue Router）

为应用添加基本的路由功能（需安装 Vue Router 包）：

<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
<router-view></router-view>

<script>
import Vue from 'vue';
import VueRouter from 'vue-router';
import Foo from './Foo.vue';
import Bar from './Bar.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
];

const router = new VueRouter({
  routes // 缩写为 `routes: routes`
});

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');
</script>

请注意，最后一个例子涉及到 Vue Router 的使用，这需要额外安装 vue-router 包，并且通常用于更复杂的应用程序结构中。对于初学者来说，了解如何创建和使用基本组件、数据绑定、条件渲染、列表渲染等是掌握 Vue 的关键。如果你正在使用 Vue 3，需要注意一些 API 和特性上的变化，例如 Composition API 和新的生命周期钩子。