Vue.js 基础语法教程

1. 环境搭建

首先需要引入Vue.js：

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

2. Vue实例创建

Vue实例是Vue应用的起点：

var app = new Vue({
    el: "#app",   // 绑定根元素
    data: {       // 数据对象
        msg: "hello vue"
    },
    methods: {    // 方法
        // 这里定义方法
    }
})

3. 基础语法

3.1 文本插值 - Mustache语法

使用双大括号进行文本插值：

<div>{{ msg }}</div>  <!-- 显示：hello vue -->

支持基本的表达式运算：

<div>{{ bool ? 'a':'b' }}</div>  <!-- 三元运算符 -->

3.2 指令

v-html

用于输出HTML字符串：

<div v-html="htmlStr"></div>

v-model

实现双向数据绑定：

<input type="text" v-model="value">
<div>{{value}}</div>

v-if / v-else-if / v-else

条件渲染：

<div v-if="color === 'red'">红色</div>
<div v-else-if="color === '绿色'">绿色</div>
<div v-else>其他颜色</div>

v-bind

绑定HTML属性：

<a v-bind:href="url">链接</a>
<!-- 简写形式 -->
<a :href="url">链接</a>

v-on

绑定事件：

<div v-on:click="clickDiv">点击事件</div>
<!-- 简写形式 -->
<div @click="clickDiv">点击事件</div>

v-for

列表渲染：

<!-- 简单数组遍历 -->
<div v-for="item in fruits">{{item}}</div>

<!-- 带索引的遍历 -->
<div v-for="(item, index) in fruits">{{index}}: {{item}}</div>

<!-- 对象数组遍历 -->
<div v-for="item in fruitsS" :key="item.name">
    {{item.name}}: ¥{{item.price}}
</div>

3.3 Class与Style绑定

动态绑定class：

<div :class="{'active': item === cur_menu}">
    <!-- active类将在item等于cur_menu时被添加 -->
</div>

4. 完整示例

下面是一个包含菜单切换的完整示例：

<div style="display: flex;margin-top: 30px;">
    <select v-model="cur_menu">
        <option v-for="item in menu" :key="item">{{item}}</option>
    </select>
    <div style="padding: 0 10px" 
         :class="{'active': item === cur_menu}"
         v-for="item in menu" 
         :key="item">
        {{item}}
    </div>
</div>

<script>
var app = new Vue({
    el: "#app",
    data: {
        menu: ["首页", "详情", "购物车", "我的"],
        cur_menu: '首页'
    }
})
</script>

<style>
.active {
    color: red;
}
</style>

5. 注意事项

1. 在模板表达式中应避免复杂的运算
2. v-for遍历时建议添加:key属性以提高性能
3. v-if和v-show的选择要根据具体场景（频繁切换用v-show）
4. 使用v-html时要注意XSS攻击风险

---

以上就是Vue.js的基础语法介绍。