首页 > 其他分享 >初识Vue

初识Vue

时间:2022-11-13 21:22:06浏览次数:48  
标签:Vue vue app js 初识 message data

一、什么是Vue

简单的说,Vue是一个用来开发Web界面的前端库,就是一个叫vue.js的文件,就好比jQuery库的jquery.js。

但Vue远不止这些,vue周边还发展了很多其他的工具,也都是一堆js文件。

注意:Vue不支持IE8及以下版本,在移动端支持到Android4.2+ 和 IOS7+

 

二、HelloWorld

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 1. 首先引入vue.js文件库 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
    <!-- 2. 定义一个ID为app的容器,容器里的内容称为Vue模板,Vue将按模板来渲染页面 -->
    <div id="app">
        {{ message }}
    </div>
    <script>
        //3. 创建Vue实例,并传入一个配置对象{}。Vue实例在实际开发中一般只有一个
        var app = new Vue({
            el: '#app',//指定容器,通常为CSS选择器字符串
            data: {//data用于存储数据,数据供el所指定的容器去使用
                message: 'Hello Vue!'//绑定数据
            }
        })
    </script>
</body>
</html>

第一个Vue程序完成,在浏览器打开该文件,就可以看到Hellow Vue。

 

标签:Vue,vue,app,js,初识,message,data
From: https://www.cnblogs.com/weslie/p/16886991.html

相关文章

  • 46.使用过vuex和vue-router吗
    使用过,vuex是状态管理工具,它的数据可以被所有的组件获取,方法可以被所有的组件调用;vuex 的内部的运行机制:state提供了数据驱动视图,dispath派发actions执行异步操作,comm......
  • 组件之间的通信2-->vuex状态管理
    在上期,我们讲了父子组件的传递方式,但是,如果我们想知道这些数据从哪里来的话,就需要一层一层找父组件,最后才能找到数据,容易造成Prop逐级透传问题今天,我们将介绍另一......
  • 【Vue2-04】scoped样式
    scoped样式作用:让样式在局部生效,防止冲突写法:<stylescoped><template><div></div></template><script>exportdefault{}</script......
  • 【Vue2-02】ref属性
    ref属性被用来给元素或子组件注册引用信息(id的替代者)应用在html标签上获取的是真实DOM元素,应用在组件标签上是组件实例对象(vc)使用方式:打标识:<h1ref="xxx">...</......
  • 【Vue2-03】props属性
    props配置功能:让组件接收外部传过来的数据数据传递:<Demoname="xxx">接收数据:方式一(只接收): props:['name'] 方式二(限制类型): props:{ name:String......
  • 35. vue响应式的get和set如何触发或者过程
    首先,vue内部使用 Object.defineProperty给data中的数据添加了getter和setter函数 ;当我们访问数据的时候,会触发getter函数return给我们数据值,当我们修改数据......
  • 34.vue响应式
    响应式就是数据发生变化,ui界面自动更新内容;vue响应式的实现是在创建vue实例的时候,遍历data数据,通过Object.defineProperty给每个数据添加getter和setter函数,获取......
  • 32. vue框架的理解
    vue是创建用户界面的框架,是创建SPA应用的框架,采用了MVVM模型,是数据驱动视图;使用了业务逻辑和页面解构分离的开发思想;使用高效的diff算法渲染列表;使用组件化开发,提高代......
  • Vue路由守卫操作-全局路由守卫
     先上代码:router.beforeEach=全局路由守卫//这个东西叫做路由守卫//在我们浏览器上面输入了url地址以后跳转到一个组件去router.beforeEach((to,from,next)=>......
  • 【Vue2-01】Vue脚手架
    Vue脚手架一、单文件组件1.单文件组件定义单文件组件:*.vue文件,类似HTML格式的文件。Vue的单文件组件会将一个组件的逻辑(JavaScript)、模板(HTML)和样式(CSS)封装在同......