Vue 基础学习

Vue 简介:

        ①JavaScript框架;②简化DOM操作; ③响应式数据驱动

官方文档: Vue.js

开发工具:VSCode (Live Server 插件)

Vue下载:安装 — Vue.js

Vue 实例的作用范围:

           Vue会管理 el(设置Vue实例挂载) 选项命中的元素及其内部的后代元素;可使用其他选择器,但建议使用ID选择器;可以使用其他双标签,不能使用<HTML><BODY>

data数据对象:

            Vue数据定义定义在data中;data可以是复杂类型数据;渲染复杂类型数据,遵守JS语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content= "width=device-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title> Vue 基础 </title>
</head>
<body>
    <!-- 开发环境版本,包含帮助命令行警告-->
    <script src="http://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <div id = "app">
        {{meassage}}
        <h2>{{obj.pram1}}{{obj.pram2}}</h2>
        <ul>
            <li>{{list[0]}}</li>
            <li>{{list[1]}}</li>
            <li>{{list[2]}}</li>
        </ul>
    </div>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                message:"Hello Vue",
                obj:{
                    pram1:"Pram1",
                    pram2:"Pram2"
                },        
                list:["one","two","three"]
            }
        })

    </script>


</body>
</html>

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
THE END
分享
二维码
< <上一篇
下一篇>>