vue插值表达式和数据绑定

最新推荐文章于 2024-05-08 23:35:06 发布

gaearon

最新推荐文章于 2024-05-08 23:35:06 发布

阅读量1.3k

点赞数 1

分类专栏： Vue 文章标签： vue javascript js vue.js 前端

本文链接：https://blog.csdn.net/weixin_45499478/article/details/113065864

版权

插值表达式

Vue 中的插值表达式类似模板引擎中的写法，通过 { { value }} 的形式在打括号内填充数据。如下代码所示：

<body>
    <!-- 插值表达式，类似模板引擎中的待填充数据 -->
    <div class="container">{
  {msg}}</div>

    <script src="../lib/vue.js"></script>
    <script>
        let v = new Vue({
    
            // el 用来以 CSS 选择器的方式选择一个元素
            el: '.container',
            // 在选中的元素中传递值
            data: {
    
                msg: '你好 vue'
            }
        })
    </script>
</body>

最终解析在 html 页面中的内容如下：

你好 vue

插值表达式还可以用来进行简单的计算：

<body>
    <!-- 插值表达式，类似模板引擎中的待填充数据 -->
    <div class="container">
        <div>{
  {msg}}</div>
        <div>{
  { 1+1}}</div>
        <div>{
  { '哈哈哈' + msg + (1+1) }}</div>
        <div>{
  { 1 > 2? true : false }}</div>
    </div>
    
    <script src="../lib/vue.js"></script>
    <script>
        let v = new Vue({
    
            // el 用来以 CSS 选择器的方式选择一个元素
            el: '.container',

            // 在选中的元素中传递值
            data: {
    
                msg: '你好 vue'
            }
        })
    </script>
</body>

在页面中的结果如下：

你好 vue
2
哈哈哈你好 vue2
false

Vue 框架的编译分析

在 script 标签中使用了 vue 的语法，HTML 并不认识 vue 的语法，在页面中却正常解析了 vue 语法，这是因为我们所引入的 vue.js 文件将 vue 语法编译成了原生 DOM 语法。

数据绑定

数据绑定分为单向数据绑定和双向数据绑定，

单向数据绑定是指，Vue 对象中的属性更改，html 页面中的内容也随之更改；但是页面内容修改时，Vue 对象的属性不变
双向数据绑定是指，Vue 对象中的属性更改，html 页面中的内容也随之更改；html 页面中的内容被改变时，Vue 对象中的属性也会更改。

单向数据绑定

`v-cloak` 指令

使用插值表达式在刷新页面时，花括号中的内容会短暂的显示，对于一些配置不太好的计算机来说会更加明显；而 v-cloak 指令可以解决这种问题。

使用 v-cloak 指令在页面中的元素中设置 v-cloak 属性，然后将该元素隐藏。

一定要使用 v-cloak 属性作为选择器将元素隐藏，否则 vue 加载完成之后元素无法显示。

示例代码如下：

HTML

<body>
    <div v-cloak>
        <div>{
  {msg}}</div>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
        let vm = new Vue({
    
            el: '[v-cloak]',
            data: {
    
                msg: 'hello'

最低0.47元/天解锁文章

gaearon

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
vue插值表达式和数据绑定

插值表达式Vue 中的插值表达式类似模板引擎中的写法，通过 {{ value }} 的形式在打括号内填充数据。如下代码所示：<body>  <div class="container">{{msg}}</div> <script src="../lib/vue.js"></script> <script> let v
复制链接

扫一扫