VUE的创建和基本指令

最新推荐文章于 2023-08-02 17:11:47 发布

胡先生的博客

最新推荐文章于 2023-08-02 17:11:47 发布

阅读量313

点赞数

文章标签： vue html css

本文链接：https://blog.csdn.net/weixin_47683287/article/details/109325081

版权

VUE的创建和基本指令的使用

<!DOCTYPE html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="">
        <script src="vue/vue.js"></script>
        <style>
            [v-cloak] {
               display:none;
            }
        </style>
    </head>
    <body>
        <!--[if lt IE 7]>
            <p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="#">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->
        <div id="app">
            {{name}}
            <div v-text = "mag"> </div>
            <div v-html = "mad"></div>
            <div v-pre>{{mas}}</div>
            <div>
                {{mah}}
            </div>
            <input type="text" v-model = "mah">
        </div>

        <!-- 
            vue的创建：1、用new Vue()声明vue对象（实例）
                      2、在实例中有两个重要属性
                         1、el：元素选择器绑定（值为css选择器或者Dom对象），也就是类似选择器吧。
                         2.data：模型数据（数据变量的创建位置，在页面中所有的数据变量，都要在里面创建，并为变量赋值，就是数据存放的位置）
            插值表达式：{{  数据变量  }}，将数据变量中的值，填充到HTML标签中，并支持基础的计算操作。
            指令：v-开头
            1、v-cloak ：清除（隐藏）页面{{}}的闪动
                   用法：1、提供css样式，在样式表中写入
                           [v-cloak] {
                               display:none;
                           }
                           <style>
                              [v-cloak] {
                                 display:none;
                            }
                            </style>
                        2、在{{}}所在标签中加入v-cloak
                             <div id="app" v-cloak>
                                {{name}}
                             </div>

            2、v-text：纯文本的填充
                 用法：<标签 v-text = " 数据变量 ">  <标签> 
                      <div v-text = "mag"> </div>
                      mag:'你好啊',

            3、v-html：填充html片段   (存在重大安全隐患)
                 用法：<标签 v-html = " 数据变量 ">  <标签> 
                      <div v-html = "mad"></div>
                       mad:'<h1>你真好啊</h1>' 
            
            4、v-pre：显示原始信息
                 用法：<标签 v-pre> </标签>  
                      <div v-pre>{{mas}}</div> 
                      
            5、v-once：只显示一次，不可以更改
                 用法：<标签 v-once> </标签> 
                 
            6、双向数据绑定
                 数据的绑定：就是将数据填充到标签中。
                 数据的响应式：数据的变化导致页面内容的变化。
            v-model：用于表单和组件创建双向数据绑定
               限制: <input> <select> <textarea> components
               用法：<input type = "text" v-medol = "数据变量">
               <div>
                  {{mah}}
               </div>
               <input type="text" v-model = "mah">
               通过对表单内的更改，可以更改同步到div中        

               
            以上的操作都在同一选择器范围(app)中进行操作的。                 
        -->

        <script>
            // vue的创建
            var app = new Vue({
                el:'#app',              
                data:{
                    name:'刘德华',
                    mag:'你好啊',
                    mad:'<h1>你真好啊</h1>',
                    mas:'你真不错',
                    mah:'你是个鬼哦',

                }
            })
        </script>

        
        
    </body>
</html>