vue.js开发基础(web开发笔记2)

一.怎么使用vue.js

导入 Vue 的 JS 文件,文件中声明了一个名为 Vue 的构造函数

new Vue(),创建 Vue 的实例对象,用 vm 来表示
通过 el 选项,指定 vue 所控制的 DOM 区域
 创建 vue 所控制的 DOM 区域。 注意:选择器一定要和 el 选项的值匹配
将 Vue 中定义的数据渲染到页面 ,Vue 提供了 data 选项,用来定义数据,供页面渲染时使用

 

<body>

    <div id="app">

        <p>{{msg}}</p>

    </div>

    <div id="add">

        <p>{{msg}}</p>

    </div>

<!--导入vue.js-->>

<script src="./vue.js"></script>

<script>

    //实例化一个vue

    new Vue ({

        el:'#app',

        data:{

            msg:'xxx'

        }

    })

</script>

</body>

 

效果

input v-model="name"

双向数据绑定 页面对于input的value改变,能影响内存中name变量内存js改变name的值,会影响页面重新渲染最新值

 

插值表达式

{{ 表达式 }}

对象 (不要连续3个{{ {name:'jack'} }})

字符串 {{ 'xxx' }}

判断后的布尔值 {{ true }}

三元表达式 {{ true?'是正确':'错误' }}

可以用于页面中简单粗暴的调试

注意: 必须在data这个函数中返回的对象中声明

id id选择器/class class选择器

id相当于人的身份证,不可以重复

 class相当于人的名称可以重复

一个html标签只能绑定一个id名称

一个html标签可以绑定多个class名称

id选择器是以#开头

class选择器是以.开头

id一般情况下是给js用的,所有除非特殊情况下,否则不要用id去设置样式

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值