vue学习（1）（官网第一个程序、el挂载点、data）

最新推荐文章于 2024-07-25 09:51:39 发布

MIMO. mimo

最新推荐文章于 2024-07-25 09:51:39 发布

阅读量39

点赞数

文章标签： vue.js 学习 javascript

本文链接：https://blog.csdn.net/mimo_mimo/article/details/129503882

版权

vue简介

js框架，需要遵守一整套规则，
vue简化了DOM（获取元素，操作元素）的过程
vue具有响应式数据驱动，数据改变，页面同步更新

第一个vue程序

vue官网
https://cn.vuejs.org/

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
 <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

创建vue实例对象是，设置el属性和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 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ message }}
    </div>



     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                message: 'Hello Vue!'
            }
        })
    </script>
</body>
</html>

    {{ message }} //插值表达式

el挂载点

通过选择器来设置被vue实例管理的元素，被命中的元素内部使用{{ }}修饰的元素会被data中同名的数据替换

	<div id="app">
        {{ huandiao }}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                huandiao: 'Hello Vue!'
            }
        })
    </script>

1、Vue实例的作用范围是什么呢?

el选项命中的元素中{{ }}的位置及其内部的后代元素

2、是否可以使用其他的选择器?

可以，但建议使用ID选择器，ID选择器一般认为是唯一的

3、是否可以设置其他的dom元素呢?

可以使用其他的双标签（单标签没有内部），不能使用HTML和BODY，建议使用div内挂在，因为一般没有什么其他的样式

data数据对象

vue中的数据定义在data中，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 src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        {{ huandiao }}
        <h2>
        {{school}}
        </h2>
        <h2>
        {{school.name}}{{school.mobile}}
        </h2>
        <ul>
            <li> {{arr[0]}} </li>
            <li> {{arr[1]}} </li>
            <li> {{arr[2]}} </li>
        </ul>
    </div>
    


     <!-- 开发环境版本，包含了有帮助的命令行警告 -->
     <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                huandiao: 'data数据',
                //复杂类型的数据
                school:{
                    name:"xiaohong",
                    mobile:"123-456-7890"
                },
                //数组
                arr:["arr0","arr1","arr2"]
            }
        })
    </script>
</body>
</html>