2、vue（二）-CSDN博客

本文链接：https://blog.csdn.net/weixin_45608577/article/details/117453446

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{a}}</div>
</div>
<script>
    var data = {a:1,b:null}
    Object.freeze(data)
    var app = new Vue({
        el:'#app',
        data:data,
        created () {
            console.log("created")
        }
    })
    console.log(data.a=app.a)
    data.a=99
    console.log(app.a)
    app.a=100
    console.log(data.a)

    console.log(app.$el=document.getElementById("app"))
    console.log(app.$data=data)
</script>
</body>
</html>

在这里插入图片描述
模板语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{a}}</div>
    <button :disabled='enableBtn' @click='num++'>按钮</button>
    <div v-html='a'></div>
    <div>{{num>101?'good':num}}</div>
    <a :href='mylink'>haohao</a>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
            a:'<h1>hello haohao</h1>',
            enableBtn:false,
            b:null,
            num:99,
            mylink:'www.baidu.com'
        }
    })
</script>
</body>
</html>

在这里插入图片描述
计算属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <div>{{reverseMessage}}</div>
    <div>{{copyMsg}}</div>
</div>
<script>
    var app = new Vue({
        el:'#app',
        data:{
           message:"hello haohao",
           copyMsg:null
        },
/*        methods: {
            reverseMessage(){
                return this.message.split('').reverse().join('')
            }
        },*/
        computed: {
            reverseMessage:{
            get(){
                return this.message.split('').reverse().join('')
            },
            set(newVal){
                this.copyMsg=newVal;
            }
        }
 /*           reverseMessage(){
                return this.message.split('').reverse().join('')
            }*/
        }
    })
</script>
</body>
</html>