首页 > 其他分享 >初识Vue

初识Vue

时间:2022-11-28 22:36:48浏览次数:34  
标签:容器 Vue 初识 js 实例 data

初识Vue                 1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;                 2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;                 3.root容器里的代码被称为【Vue模板】;                 4.Vue实例和容器是一一对应的;                 5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;                 6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;                 7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新注意区分:js表达式 和 js代码(语句)                         1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:                                     (1). a                                     (2). a+b                                     (3). demo(1)                                     (4). x === y ? 'a' : 'b'
                        2.js代码(语句)                                     (1). if(){}                                     (2). for(){}

示例:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>初识Vue</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>
         

        <!-- 准备好一个容器 -->
        <div id="demo">
            <h1>Hello,{{name.toUpperCase()}},{{address}},{{Date.now()}}</h1>
        </div>

        <script type="text/javascript" >
            Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。

            //创建Vue实例
            new Vue({
                el:'#demo', //el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
                data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象。
                    name:'atguigu',
                    address:'北京'
                }
            })

        </script>
    </body>
</html>

 

标签:容器,Vue,初识,js,实例,data
From: https://www.cnblogs.com/anjingdian/p/16933864.html

相关文章

  • vue3相较于vue2的改动
    v-if和v-for的优先级在vue2中:当v-if和v-for同时使用时,v-for的优先级高于v-if(因此我们通常需要计算属性先对数据进行加工处理,以达到性能优化的目的)在vue3中:当v-if和v-for......
  • Vue2(笔记01) - 基础 - Vue简介
    笔记来自尚硅谷课程:1Vue是什么?一套用于构建用户界面的渐进式Javascript框架;它基于标准HTML、CSS和JavaScript构建,并提供了一套声明式的、组件化的编程模型,帮助你高效......
  • Vue项目“TypeError: Cannot read property ‘_wrapper’ of undefined
    前情最近在开发一个H5营销活动项目,为了更高的开发效率我使用了Vue全家桶来实现。坑位在开发中遇到一个奇怪报错(报错截图如下),从提示看也定位不到是哪里出问题Why?......
  • Mac 添加vue-devtool
    在安装vue-devtools时,npminstall时总是报错,各种方法都试了,都是不成功,最后在网上找到了这种方法成功了,记录下来。第一步:创建一个新的空文件夹,最好可以见名知意,进入文件内......
  • 在windows的webstorm终端上运行vue add router,报错为:无法加载文件 C:\Users\Miao
      vue:无法加载文件C:\Users\MiaoXing\AppData\Roaming\npm\vue.ps1,因为在此系统上禁止运行脚本。有关详细信息,请参阅https:/go.microsoft.com/fwlink/?LinkID=1......
  • vue文件上传组件
    ​ 最近遇见一个需要上传百兆大文件的需求,调研了七牛和腾讯云的切片分段上传功能,因此在此整理前端大文件上传相关功能的实现。在某些业务中,大文件上传是一个比较重要的......
  • vue2 组件共享数据 父子组件 兄弟组件
    父子组件:父只管定义数据和传数据子只管接收数据和声明数据父:<hello:msg="message":user="username"></hello>importhellofrom'@/components/HelloWorld......
  • vue3 第二天vue响应式原理以及ref和reactive区别
    前言:前天我们学了ref和reactive,提到了响应式数据和Proxy,那我们今天就来了解一下,vue3的响应式在了解之前,先复习一下之前vue2的响应式原理vue2的响应式:原理:对......
  • Vue 2.x源码学习:render方法、模板解析和依赖收集
    众所周知,Vue的脚手架项目是通过编写.vue文件来对应vue里组件,然后.vue文件是通过vue-loader来解析的,下面是我学习组件渲染过程和模板解析中的一些笔记。之前的笔记:应用初......
  • Vue中computed和watch的区别
    今天简单说一下computed和watch的区别。先看代码,两者怎么实现的。<divid="app"><inputtype="text"v-model="firstName"><br><inputtype="text"v-......