携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第34天，点击查看活动详情

vue基础用法&基础原理整理

1. vue基础知识和原理

1.1 初识Vue

• 想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
• demo容器里的代码依然符合html规范，只不过混入了一些特殊的Vue语法
• demo容器里的代码被称为【Vue模板】
• Vue实例和容器是一一对应的
• 真实开发中只有一个Vue实例，并且会配合着组件一起使用
• {{xxx}}是Vue的语法：插值表达式，{{xxx}}可以读取到data中的所有属性
• 一旦data中的数据发生改变，那么页面中用到该数据的地方也会自动更新(Vue实现的响应式)

初始示例代码

<!-- 准备好一个容器 -->
<div id="demo">
    <h1>Hello，{{name.toUpperCase()}}，{{address}}</h1>
</div>
​
<script type="text/javascript" >
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
​
    //创建Vue实例
    new Vue({
        el:'#demo', //el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串。
        data:{ //data中用于存储数据，数据供el所指定的容器去使用，值我们暂时先写成一个对象。
            name:'hello,world',
            address:'北京'
        }
    });
</script>

1.2 模板语法

Vue模板语法有2大类:

• 插值语法：

  功能：用于解析标签体内容

  写法：{{xxx}}，xxx是js表达式，且可以直接读取到data中的所有属性

• 指令语法:

  功能：用于解析标签（包括：标签属性、标签体内容、绑定事件.....）

  举例：v-bind:href="xxx" 或 简写为 :href="xxx"，xxx同样要写js表达式，且可以直接读取到data中的所有属性

代码

<div id="root">
    <h1>插值语法</h1>
    <h3>你好，{{name}}</h3>
    <hr/>
    <h1>指令语法</h1>
    <!-- 这里是展示被Vue指令绑定的属性，引号内写的是js表达式 -->
    <a :href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
    <a :href="school.url" x="hello">点我去{{school.name}}学习2</a>
</div>
​
<script>
    new Vue({
        el:'#root',
        data:{
            name:'jack',
            school:{
                name:'百度',
                url:'http://www.baidu.com',
            }
        }
    })
</script>

1.3 数据绑定

Vue中有2种数据绑定的方式：

• 单向绑定(v-bind)：数据只能从data流向页面

• 双向绑定(v-model)：数据不仅能从data流向页面，还可以从页面流向data

  tips:

  1.双向绑定一般都应用在表单类元素上（如：input、select等）

  2.v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值

<div id="root">
    <!-- 普通写法 单向数据绑定 -->
    单向数据绑定：<input type="text" v-bind:value="name"><br/>
    双向数据绑定：<input type="text" v-model:value="name"><br/>
    
    <!-- 简写 v-model:value 可以简写为 v-model，因为v-model默认收集的就是value值-->
    单向数据绑定：<input type="text" :value="name"><br/>
    双向数据绑定：<input type="text" v-model="name"><br/>
</div>
​
<script>
    new Vue({
        el:'#root',
        data:{
            name:'jack',
        }
    })
</script>

1.4 el与data的两种写法

el有2种写法

• new Vue时候配置el属性
• 先创建Vue实例，随后再通过vm.$mount('#root')指定el的值

<script>
    // 第一种 
    const vm = new Vue({
        el:'#root',
        data:{
            name:'jack',
        }
    })
    
    // 第二种
    vm.$mount('#root')
</script>

data有2种写法

• 对象式

• 函数式

  在组件中，data必须使用函数式

<script>
    new Vue({
        el:'#root',
        // 第一种
        data:{
            name:'jack',
        }
        
        // 第二种
        data() {
            return {
                name: 'jack'
            }
        }
    })
</script>

1.5 Vue中的MVVM

• M：模型(Model) ：data中的数据
• V：视图(View) ：模板代码
• VM：视图模型(ViewModel)：Vue实例

\