1.vue 搭建环境 差值表达式 模板 指令

搭建环境

    <div id="box">
        {{str}}
    </div>
    <script>
        // createApp 创建一个应用  这个方法的返回值是的对象
        let app =   Vue.createApp({
             data:function(){   //数据必须存储在data函数返回的对象里
                return {
                    str:'hello world'
                }
             }
        })
        app.mount("#box")
        //mount 挂载  把应用挂载到一个dom节点上
        console.log(app)
    </script>

差值表达式（ Mustache）

{{ js表达式 }}

模板（template)

含有差值表达式的html称为模板

data里的数据是响应式数据

数据变化了，视图会自动更新

数据驱动

数据变化视图自动变化，

学习内容

指令(directive)

组件（component)

路由(router)

全局状态管理(vuex 和 pinia)

第三方的插件和库

指令

​ v-bind 动态的绑定元素的属性的值 可以简写为":"

​ 单项绑定命令，视图变化，数据不变，数据变化，视图改变

绑定样式

<div v-bind:style="{display:visible?'block':'none'}">abc</div>

<div :class="{'hide':!visible}">abc</div>

v-on 监听事件并响应

​ v-on:事件="事件处理函数或语句" 可以简写为"@"

​ v-model 双向绑定数据的指令

​ 数据变化了，视图会变化 ，视图变化了，数据也会变化

修饰符

​ .number 将输入的合法符串转为数字

v-show 切换css样式，实现显示隐藏

v-if 惰性指令，条件成立的时候，才进行渲染，条件不成立不进行渲染

 <input type="text" v-model.number="inputNum" /> 
        <p v-if="inputNum>n">大了</p>
        <p v-else-if="inputNum<n">小了</p>
        <p v-else>对了</p>

v-for

        <ul>
            <li v-for="(item,index) in arr" :key="item.id">
                {{item.id}} {{item.name}} {{item.age}}
            </li>
        </ul>