黑马程序员技术交流社区

标题: 【成都校区】--- vue的初步使用方法 [打印本页]
作者: 小刀葛小伦    时间: 2020-1-16 13:57
标题: 【成都校区】--- vue的初步使用方法
一.下载vue文件并引入
当然你也可以不下载文件，直接引入文件，前提是你有网络
下载vue文件
引入vue文件
这里引入的是在线的文件

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
1
2
<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
1
2
二、 实例化vue构造函数 new Vue({参数配置})
[JavaScript] 纯文本查看 复制代码
let vm= new Vue({

        //el:element元素的意思  作用与页面关联的

        el:'#app',

        // data: MVVM中的m 专门用来保存每个页面数据

        data:{

            msg:'hellow word'

        }

    })

三、 通过el选项配置关联视图层
[JavaScript] 纯文本查看 复制代码
<!--创建视图层-->

<div id="app">

    <h1> {{msg}} </h1>

</div>

四、 通过data配置设置参数，储存数据
五.通过{{}}表达式在视图层里渲染数据（像简单的模板引擎）
完整的页面
[JavaScript] 纯文本查看 复制代码
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

</head>

<body>

<!--创建视图层-->

<div id="app">

    <h1> {{msg}} </h1>

</div>

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

<script>

    /*1.下载文件并引入

    2.实例化vue构造函数  new Vue({参数配置})

    3.通过el选项配置关联视图层

    4.通过data配置设置参数，储存数据

    5.通过{{}}表达式在视图层里渲染数据（像简单的模板引擎）

    * */

  //  VM  viewmodel  视图模型

  let vm= new Vue({

        //el:element元素的意思  作用与页面关联的

        el:'#app',

        // data: MVVM中的m 专门用来保存每个页面数据

        data:{

            msg:'hellow word'

        }

    })

</script>

</body>

</html>






欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) 黑马程序员IT技术论坛 X3.2