Vue笔记_01（初识Vue）_vue shao-CSDN博客

本文链接：https://blog.csdn.net/weixin_53402317/article/details/127214595

Vue的官方文档https://cn.vuejs.org/1)安装Vue.js(在文档中有安装的按钮，注意安装开发版本)

再安装Vue开发者工具扩展Vue.crx，Chrome浏览器安装方式：
①：点击右上角三个点
②：点击更多工具
③：点击扩展程序
④：点击右上角的开发者模式，将他启用
⑤：将下载的Vue.crx文件直接拖动到浏览器窗口即可

2）将下载好的vue.js放入文件，并建立基本目录结构如下：

3）敲html5:再敲enter创建基本html骨架

4）导入vue.js

 <script type="text/javascript" src=" ../js/vue.js"></script>

5)创建容器及Vue实例（Vue实例中的el与容器一一对应）

ps：Vue模板语法：

1.插值语法：

功能：用于解析签体内容

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

 <div id="root">
        <h1>我的名字是{{name}}，我的学号是{{Sno}} </h1>
    </div>

<script type="text/javascript">
        const x = new Vue(
            {
                el: '#root',
                data: {
                    name: 'shao',
                    Sno: '916'
                }
            }
        )
    </script>

2.指令语法：

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

举例：v-bind:herf="xxx"或简写herf="xxx"(以v-bind为例)

 <div id="root">
        <h1>我的名字是{{name}}，我的学号是{{Sno}} </h1>
        <a v-bind:href="url">点击进入CSDN</a>
    </div>

    <script type="text/javascript">
        const x = new Vue(
            {
                el: '#root',
                data: {
                    name: 'shao',
                    Sno: '916',
                    url: 'http://www.csdn.net'
                },
            }
        )
    </script>

data相当于C语言结构体，里面的元素也可以是结构体型的，那么调用就是什么点属性了：

 <h1>我的名字是{{school.name}}，我的学号是{{school.Sno}} </h1>

<script type="text/javascript">
        const x = new Vue(
            {
                el: '#root',
                data: {
                    school: {
                        name: 'shao',
                        Sno: '916'
                    },
                    url: 'http://www.csdn.net'
                },
            }
        )
    </script>

6）数据绑定（单向绑定v-bind和双向绑定v-model）

 <!--数据绑定-->
  单向数据绑定：<input type="text" v-bind:value="name"><br />
  双向绑定：<input type="text" v-model:value="name"><br />
 <!--简写形式-->
  单向数据绑定：<input type="text" :value="name"><br />
  双向绑定：<input type="text" v-model="name"><br />

演示：

今日代码（2022.10.8）

<!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">
    <script type="text/javascript" src=" ../js/vue.js"></script>
    <title>MyFirstVue</title>
</head>

<body>
    <div id="root">
        <h1>我的名字是{{school.name}}，我的学号是{{school.Sno}} </h1>
        <a v-bind:href="url">点击进入CSDN</a><br />
        <!--数据绑定-->
        单向数据绑定：<input type="text" v-bind:value="name"><br />
        双向绑定：<input type="text" v-model:value="name"><br />
        <!--简写形式-->
        单向数据绑定：<input type="text" :value="name"><br />
        双向绑定：<input type="text" v-model="name"><br />
    </div>
    <script type="text/javascript">
        const x = new Vue(
            {
                el: '#root',
                data: {
                    name: 'shao',
                    Sno: '916',
                    school: {
                        name: 'shao',
                        Sno: '916'
                    },
                    url: 'http://www.csdn.net'
                },
            }
        )
    </script>
</body>

</html>