Vue.js开发基础 03

最新推荐文章于 2024-01-19 14:40:02 发布

梦梦的小斑鸠

最新推荐文章于 2024-01-19 14:40:02 发布

阅读量200

点赞数

文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/CP011522/article/details/126629340

版权

本文介绍了如何创建第一个Vue程序，包括三个步骤：导入Vue.js文件，创建Vue实例，定义数据和挂载点。讲解了v-text和v-html指令的用途，以及v-model指令实现表单数据的双向绑定。示例展示了如何使用这些指令更新DOM内容和响应数据变化。

摘要由CSDN通过智能技术生成

我的第一个Vue程序

3个步骤

<body>
    <!-- 设置一个div给一id属性 -->
    <div id="app">
        <P>{{ msg }}</P>
    </div>
      <!-- 先导入开发环境版本的vue.js -->
    <script src="vue.js"></script>
    <script>
         var app = new Vue ({
            el:"#app",
            data:{
                msg:"你没事吧"
            } 
        })
    </script>

    
</body>

步骤一：导入 Vue 的 JS 文件，文件中声明了一个名为 Vue 的构造函数
步骤2：创建Vue实例对象,设置el属性和data属性

el：挂载点

Vue会管理el选项命中的元素及其内部的后代元素
可以使用其他的选择器,但是建议使用ID选择器
可以使用其他的双标签,不能使用HTML和BODY

data：数据对象

Vue中用到的数据定义在data中
data中可以写复杂类型的数据
淳染复杂类型数据时,遵守js的语法即可

步骤3：创建 vue 所控制的 DOM 区域。注意：选择器一定要和 el 选项的值匹配
将 Vue 中定义的数据渲染到页面

本地应用 v-text 指令和 v-html 指令

v-text指令的作用是:设置标签的内容(textContent)

默认写法会替换全部内容,使用差值表达式(0)可以替换指定内容

内部支持写表达式

v-html指令的作用是:设置元素的innerHTML

内容中有html结构会被解析为标签

v-text指令无论内容是什么,只会解析为文本

解析文本使用v-text,需要解析html结构使用v-html

<body>
    <!-- 设置一个div给一id属性 -->
    <div id="app">
        <h2 v-text="ha">哈哈哈哈</h2>
        <p v-html="content"></p>
        <P>{{ msg }}你好</P>
    </div>
      <!-- 先导入开发环境版本的vue.js -->
    <script src="vue.js"></script>
    <script>
         var app = new Vue ({
            el:"#app",
            data:{
                content:"<a herf='https://www.bilibili.com/?spm_id_from=333.788.0.0'>bilibi</a>"
            } 
        })
    </script>

    
</body>

v-model 指令

1.v-model指令
：Vue中使用v-model指令来实现表单元素和数据的双向绑定。
表单控件是很常见的，特别是对于用户信息的提交，需要大量的表单。

2.v-model指令实现：表单元素和数据的双向绑定
特点：
1.之前是用Mustache语法将数据在元素中显示，现在是用v-model将数据绑定在属性里；
(表单中很多标签是没有反标签的)
2.之前修改data数据，界面中显示会响应，
使用v-model指令，则表单中修改绑定的数据，则data中的也会改变；

  <div id="app">
        <input type="text" v-model="message">
        <h2>{{message}}</h2>
        //显示data中message实时的值
     </div>
     
     <script>
       const app = new Vue({
         el:"#app",
         data:{
           message:"你没事吧"
         }
       })
     </script>