Vue学习笔记(第一天)

44 阅读2分钟

本文已参与「新人创作礼」活动, 一起开启掘金创作之路。

Vue学习笔记(第一天)

初识Vue

初识Vue总结:

  1. 想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
  2. root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
  3. root容器里的代码被称为【Vue模板】
  4. Vue实例和容器是一一对应的
  5. 真实开发中只有一个Vue实例,并且会配合着组件一起使用
  6. {{xxx}} 中的xxx要写成js表达式,且xxx可以自动读取到data中的所有属性
  7. 一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新 示例参考代码如下:
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>初识Vue</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好{{name}},我在{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue启动时生成生产提示

        //创建vue实例
        new Vue({
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data: { //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象
                name: '同学',
                address: "北京"
            },
        })
    </script>
</body>

</html>

Vue 模板语法

Vue 模板语法总结:

Vue 模板语法有2大类

  • 插值语法:
  1. 功能:用于解析标签体内容
  2. 写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
  • 指令语法:
  1. 功能:用于解析标签(包括:标签属性、标签体内容、绑定事件。。。)
  2. 举例:v-bind:href="xxx" 或简写为 :href="xxx", xxx同样要写成js表达式

示例参考代码如下:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vue模板语法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>插值语法</h1>
        <h3>你好,{{name}}</h3>
        <hr>

        <h1>指令语法</h1>
        <a v-bind:href="url">点我去学习1</a>
        <a :href="url">点我去学习2</a>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue启动时生成生产提示

        //创建vue实例
        new Vue({
            el: '#root',  //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串
            data: { //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象
                name: 'jack',
                url: 'http://www.atguigu.com',
                school: {
                    name: "tao"
                }
            },
        })
    </script>
</body>

</html>

数据绑定

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

  1. 单向绑定(v-bind):数据只能从data流向页面
  2. 双向绑定(v-model):数据不仅能从data流向页面,还可以从页面流向data

备注:

  1. 双向绑定一般都应用在表单类元素上(如:input、select等)
  2. v-model:value 可以简写为v-model,因为v-model默认收集的是value值
  3. v-model只能应用在表单类元素(输入类元素)上
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据绑定</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <!-- 普通写法 -->
        <!-- 单向数据绑定:<input type="text" v-bind:value="name"><br>
        双向数据绑定:<input type="text" v-model:value="name"> -->
        <!-- 简写 -->
        单向数据绑定:<input type="text" :value="name"><br>
        双向数据绑定:<input type="text" v-model="name">
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue启动时生成生产提示

        //创建vue实例
        new Vue({
            el: '#root',
            data: {
                name: '尚硅谷'
            },
        })
    </script>
</body>

</html>

el与data的两种写法

data与el的2种写法:

  1. el有两种写法

    1new Vue时配置el属性
         (2)先创建Vue实例,随后再通过vm.$mount('#root')指定el的值
    
  2. data有两种写法 (1)对象式 (2)函数式

         如何选择:目前哪种都可以,以后学到组件时,data必须使用函数式,否则会报错
    
  3. 一个重要原则

由Vue管理的函数,一定不要写成箭头函数,一旦写了箭头函数,this就不再是Vue实例了

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>el与data的两种写法</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备一个容器 -->
    <div id="root">
        <h1>你好,{{name}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue启动时生成生产提示

        //el的两种写法
        /* const v = new Vue({
            el: '#root',    //第一种写法
            data: {
                name: '尚硅谷'

            },

        })
        console.log(v)
        v.$mount('#root')   //第二种写法 */

        new Vue({
            el: "#root",
            //data的第一种写法
            /* data: {
                name: '尚硅谷'

            }, */

            //data的第二种写法:函数式
            data() {
                return {
                    name: '尚硅谷'
                }
            }
        })
    </script>
</body>

</html>

MVVM模型

    M:模型:对应data中的数据
    V:试图:模板
    VM:视图模型:Vue实例对象

    观察发现
        1.data中所有的属性,最后都出现在了vm身上
        2.vm身上所有的属性 及 Vue原型上所有属性,在vue模板中都能直接使用

image.png image.png

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>MVVM</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h1>学校名称:{{name}}</h1>
        <h1>地址:{{address}}</h1>
    </div>
    <script type="text/javascript">
        Vue.config.productionTip = false;//阻止vue启动时生成生产提示

        const vm = new Vue({
            el: '#root',
            data: {
                name: "尚硅谷",
                address: '北京'
            }
        })
        console.log(vm)
    </script>
</body>

</html>

学习视频:

尚硅谷Vue2.0+Vue3.0全套教程丨vuejs从入门到精通