首页 > 其他分享 >一、初识Vue

一、初识Vue

时间:2022-10-17 11:12:55浏览次数:51  
标签:Vue name 代码 js 初识 data 表达式

1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象(el,data)(new Vue({这里是配置对象}))

2、root容器的代码依然符合html规范,只不过混入了一些特殊的Vue语法

3、root容器里的代码被称为Vue模板

4、Vue实例和容器是一一对应的

5、真实开发中只有一个Vue实例,并且会配合着组件一起使用 6、{{xxx}}中的 xxx 要写 js 表达式,且 xxx 可以自动读取到data中的所有属性 注意区分:js 表达式 和 js代码(语句) (a) 表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方 a a+b demo(1) x === y ? 'a' : 'b' (b) js代码(语句) if(){} for(){} 7、一旦data中的数据发生变化,那么模板中用到该数据的地方也会自动更新

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script src="js/vue.js"></script>
<script src="js/vue.min.js"></script>
</head>
<body>
    <h1 id="root">我的第一个标题{{name}}</h1>
    <h2 id="root">我的第一个标题{{name}}</h1>
    <script type="text/javascript">
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示。
        new Vue({
            el: "#root",
            data: {
                name: "我的第一vue"
            }
        })
    </script>
</body>
</html>

注意区分:js表达式和js代码

1.表达式:一个表达式会生成一个值,可以放在任何一个需要值的地方

(1)a(变量)

(2)a+b

(3)demo(1)

(4)三目运算

2.js代码

if(){} for(){}

标签:Vue,name,代码,js,初识,data,表达式
From: https://www.cnblogs.com/Horsonce/p/16798477.html

相关文章

  • 【Vue】vue 动态设置 src 地址
    <imgclass="logo-srkg":src="getImgUrl('hwtm.png')"alt=""/>constgetImgUrl=(src:string):string=>{returnnewURL(......
  • [Vue]子组件与父组件之间传值
    1.父组件与子组件传值props1.1定义父组件,父组件传递 inputText这个数值给子组件://父组件//引入的add-widget组件//使用v-bind的缩写语法通常更简单:<add-widget:m......
  • 初识设计模式 - 观察者模式
    简介观察者设计模式(ObserverDesignPattern)的别名有很多,如发布-订阅(Publish/Subscribe)模式、模型-视图(Model/View)模式、源-监听(Source/Listener)模式或从属者(Depend......
  • Vue.$nextTick的原理是什么-vue面试进阶
    原理性的东西就会文字较多,请耐下心来,细细品味Vue中DOM更新机制当你气势汹汹地使用Vue大展宏图的时候,突然发现,咦,我明明对这个数据进行更改了,但是当我获取它的时候怎么是上......
  • vue表格大量input框渲染性能优化
    背景有一个表格,想要通过输入框编辑内容,但是在性能低下的电脑渲染1000+的输入框时该页面存在加载缓慢的问题原因不同的dom渲染消耗的内存是不一样的,input输入框消耗比较......
  • vue-element图片上传
    <el-upload action="" :limit="1" :on-change="handleChange" :auto-upload="false" :file-list="fileList" :show-file-list="false"> <span>选择文件</span></e......
  • [转] VUE 的常用指令
    <divid="app"><pv-text="username"></p><pv-text="gender">性别</p><p>姓名:{{username}}</p><p>性别:{{gender}}</p>......
  • 初识C语言
    2022-10-1701:32:17/*%d--打印整型%c--打印字符%f--打印浮点数字-小数%p--以地址的方式打印%x--打印16进制数字%lf--打印双......
  • Vue CLI的详细介绍与讲解
    目录什么是VueCLICLI是什么意思?VueCLI使用前提安装Node.JScnpm安装VueCLI使用前提-WebpackVueCLI的使用VueCLI2选项详解目录结构详细Runtime-Compiler和Runtime-on......
  • Vue.js -- 样式绑定
    前言本文主要介绍了vue.js样式绑定的几种形式。class字符串形式代码演示:<!DOCTYPEhtml><htmllang="en"><head><title>vue样式绑定</title><scriptsrc=......