Vue2语法和必备知识点（一）一、Vue 2 常用语法 1. 模板语法插值：使用 {{ }} 绑定数据。指令： v-

一、Vue 2 常用语法

1. 模板语法

插值：使用 {{ }} 绑定数据。
```
<div>{{ message }}</div>
```

指令：

v-bind：动态绑定属性。
```
<img v-bind:src="imageSrc">
```
v-model：双向数据绑定。
```
<input v-model="message">
```

v-for：列表渲染。

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

v-if / v-else：条件渲染。

<div v-if="isVisible">显示内容</div>
<div v-else>隐藏内容</div>

v-on：事件绑定。

<button v-on:click="handleClick">点击</button>

2. 组件

定义组件：

Vue.component('my-component', {
  template: '<div>这是一个组件</div>'
});

使用组件：
```
<my-component></my-component>
```

3. 生命周期钩子

常用钩子：

created：实例创建完成后调用。
mounted：DOM 挂载完成后调用。
updated：数据更新后调用。
destroyed：实例销毁后调用。

new Vue({
  data() {
    return { message: 'Hello Vue!' };
  },
  created() {
    console.log('实例已创建');
  },
  mounted() {
    console.log('DOM 已挂载');
  }
});

4. 计算属性与侦听器

计算属性：

computed: {
  reversedMessage() {
    return this.message.split('').reverse().join('');
  }
}

侦听器：

watch: {
  message(newVal, oldVal) {
    console.log('message 变化了', newVal, oldVal);
  }
}

二、常用代码示例

1. 数据绑定与事件处理

<div id="app">
  <p>{{ message }}</p>
  <input v-model="message">
  <button @click="reverseMessage">反转消息</button>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'Hello Vue!'
    },
    methods: {
      reverseMessage() {
        this.message = this.message.split('').reverse().join('');
      }
    }
  });
</script>

2. 列表渲染与条件渲染

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.name }} - {{ item.price }}
    </li>
  </ul>
  <p v-if="items.length === 0">没有数据</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      items: [
        { id: 1, name: '苹果', price: 5 },
        { id: 2, name: '香蕉', price: 3 }
      ]
    }
  });
</script>

3. 组件通信

父传子：通过 props。

<div id="app">
  <child-component :message="parentMessage"></child-component>
</div>

<script>
  Vue.component('child-component', {
    props: ['message'],
    template: '<div>{{ message }}</div>'
  });

  new Vue({
    el: '#app',
    data: {
      parentMessage: '来自父组件的消息'
    }
  });
</script>

子传父：通过 $emit。

<div id="app">
  <child-component @send-message="handleMessage"></child-component>
  <p>{{ receivedMessage }}</p>
</div>

<script>
  Vue.component('child-component', {
    template: '<button @click="sendMessage">发送消息</button>',
    methods: {
      sendMessage() {
        this.$emit('send-message', '来自子组件的消息');
      }
    }
  });

  new Vue({
    el: '#app',
    data: {
      receivedMessage: ''
    },
    methods: {
      handleMessage(message) {
        this.receivedMessage = message;
      }
    }
  });
</script>

4. 路由管理（Vue Router）

安装：
```
npm install vue-router
```

配置：

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
  { path: '/about', component: About }
];

const router = new VueRouter({
  routes
});

new Vue({
  router
}).$mount('#app');

使用：

<router-link to="/">首页</router-link>
<router-link to="/about">关于</router-link>
<router-view></router-view>

5. 状态管理（Vuex）

安装：
```
npm install vuex
```

配置：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  actions: {
    increment({ commit }) {
      commit('increment');
    }
  }
});

new Vue({
  store
}).$mount('#app');

使用：

<div id="app">
  <p>{{ $store.state.count }}</p>
  <button @click="$store.dispatch('increment')">增加</button>
</div>

三、核心知识

响应式原理：Vue 2 使用 Object.defineProperty 实现数据响应式。
虚拟 DOM：通过虚拟 DOM 提高渲染性能。
组件化开发：将 UI 拆分为可复用的组件。
生命周期：理解 Vue 实例的生命周期钩子。
路由与状态管理：掌握 Vue Router 和 Vuex 的使用。

四、Web 应用开发流程

项目初始化：
```
vue create my-project
```
开发组件：根据需求拆分为多个组件。
配置路由：使用 Vue Router 管理页面跳转。
状态管理：使用 Vuex 管理全局状态。

常用命令速查表

命令	说明
`npm init`	初始化项目
`npm install`	安装所有依赖
`npm install package-name`	安装指定包
`npm uninstall package-name`	卸载指定包
`npm update`	更新所有依赖
`npm run server`	运行脚本启动开发服务器
`npm run test`	运行脚本打包项目
`npm run build`	运行脚本运行测试