Web应用开发实战 - Vue.js基础_vue做web应用-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_62800996/article/details/126624589

Vue.js的基本使用

在了解了Vue.js的基础上开始着手使用Vue.js。

首先了解Vue.js主要部分

       var vm = new Vue({
           el:'',
           data:{

           },
           methods:{
  
           }
       })

这里写一个Vue根实例-使用插值语法“{{ }}”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <!--导入vue.js-->
    <script src="lib/vue.js"></script>
</head>
<body>

   <div id="app">
       <!--使用插值语法，将data中的数据替换到其中-->
       <h2>{{message1}} {{message2}}</h2>
   </div>

   <script>
       // 实例化一个vue
       var vm = new Vue({
           // 找到id=app这个盒子，并把他交给vue管理
           el:'#app',
           // vue里放数据的地方
           data:{
               // 放入数据
               message1: 'hello',
               message2: 'world!'
           },
           methods:{

           }
       })
   </script>

</body>
</html>

效果图：

Vue.js - 插入HTML片段/v-text、v-html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue.js</title>
    <!--导入vue.js-->
    <script src="lib/vue.js"></script>
</head>
<body>

   <div id="app">

       <div v-text="msg">
           <!--原本的内容-->
           <!--这里会被msg替换，但只当成纯文本-->
           hello world!
       </div>
       <div v-html="msg">
           <!--原本的内容-->
           hello world!
       </div>
   </div>


   <script>
       // 实例化一个vue
       var vm = new Vue({
           // 找到id=app这个盒子，并把他交给vue管理
           el:'#app',
           // vue里放数据的地方
           data:{
               // 放入数据
               msg: '<h2>我是替换的内容</h2>'
           },
           methods:{

           }
       })
   </script>

</body>
</html>

效果图：

双向奔赴 "v-model指令" - 账号输入实例


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue.js</title>
    <!--导入vue.js-->
    <script src="lib/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>
        <!-- 使用model指令进行数据的双向绑定 -->
        <!-- value会改变msg的值,msg也会改变model -->
        <input type="text" v-model="msg">
    </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'hello'
            },
            methods: {

            },
        });
    </script>
</body>
</html>

效果图：