Vue--基本语法

Vue 基础语法
 
1.插值语法-----Mustache 胡子语法
    可以放 变量 也可以放 表达式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
           <h2>{{msg}}</h2>
           <h2>{{msg}}+泰坦尼克号</h2>
           <h2>{{fristName+lastName}}</h2>
           <h2>{{fristName+' '+lastName}}</h2>
           <h2>{{couter*2}}</h2>
    </div>
 
 
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)、 const(常量)
        //声明式编程
    const app=new Vue({
       el: '#app',
       data:{
           msg:"你好",
           fristName: "李",
           lastName: "银河",
           couter: 200
 
 
       }
    })
    </script>
</body>

 

2. v-once 只加载一次，后面不会改变（响应式的会跟着改变）
3.v-html 解析出HTML 展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>url</h2>
        <h2 v-html="url"></h2>
 
 
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)、 const(常量)
        //声明式编程
    const app=new Vue({
       el: '#app',
       data:{
           msg:"你好",
           url: '<a href="http://www.baidu.com">百度一下</a>'
       }
    })
    </script>
</body>

 

4.v-text
与Mustache相似 并用会覆盖
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}，李银河</h2>
        <h2 v-text="msg">李银河</h2>
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)、 const(常量)
        //声明式编程
    const app=new Vue({
       el: '#app',
       data:{
           msg:"你好"
       }
    })
    </script>
    
</body>

 

 
5.v-pre 显示原本，不传值
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h2>{{msg}}</h2>
        <h2 v-pre>{{msg}}</h2>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)、 const(常量)
        //声明式编程
    const app=new Vue({
       el: '#app',
       data:{
           msg:"你好"
       }
    })
    </script>
    
</body>

 

 
 
6.v-cloak 相当于一个声明
 [v-cloak] {
         display: none;
     } 声明隐藏  代码解析跟java 一样从上到下 走到app 时还没有解析 走完了就解析 再显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style> //此处声明隐藏
     [v-cloak] {
         display: none;
     }
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <h2>{{msg}}</h2>
    
    </div>
    <script src="../js/vue.js"></script>
    <script>
        //let(变量)、 const(常量)
        //声明式编程
    setTimeout(function(){
        const app=new Vue({
       el: '#app',
       data:{
           msg:"你好"
       }
    })
    },1000)
    </script>
</body>

 

 
 
 
posted @ 2020-12-01 17:29  SoToHard  阅读(46)  评论(0)  编辑  收藏  举报