VUE

VUE基础

VUE简介

1. JS框架 - 比jQuery等JS库更强大
2. 简化DOM操作
3. 响应式数据驱动

VUE文档

• V2:cn.vuejs.org/v2/guide/
• V3:v3.cn.vuejs.org/guide/intro…

VUE上手实例

1. 导入对应版本的Vue.js文件
2. 创建Vue实例对象，设置el属性和data属性
3. 使用{{ex}}模板语法将数据渲染到页面上

<div id="app">
    <!-- 插值表达式/模板语法 -->
    {{ message }}
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
      el: '#app',
      data: {
        message: '你好!'
      }
    })
</script>

el属性：挂载点

1. el命中的元素内部均可以使用插值表达式/模板语法进行数据交互

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

2. el选择器不局限于id,但建议使用id唯一选择器
3. 可以使用其他的双标签，但不能使用HTML和BODY进行mount

data:数据对象

<div id="app">
    {{message}}
    <h2>{{slogan.ZH}}</h2>
    <h3>{{slogan.EN}}</h3>
    <ul>
        <li>{{city[0]}}</li>
        <li>{{city[1]}}</li>
    </ul>
</div>
<!-- VUE2开发环境版本，包含有命令行警告提示 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vuejs"></script>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            message: "Cool",
            slogan: {
                ZH: "加油！",
                EN: "nice work!"
            },
            city: ["Shanghai", "Beijing", "Guizhou"]
        }
    })
</script>