vue介绍和使用

【一】响应式-数据变页面也变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <script src="vue/vue2.js"></script>-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div class="app">
    {{h}}
    <br>
    <input type="text" v-model="username">

</div>

<script>
    // 申明变量
    var vm = new Vue({
        el : '.app',
        data:{
            h:'hello world',
            username:'hope'
        }
    })
    
</script>
</body>
</html>

【二】模板语法

  • 在被vue管理的标签中插值语法使用 {{}}-->必须是定义在data中的数据
  • 放：字符串，数字，对象，数组，函数执行，修改变量值，三目运算符。
    • 不能定义变量
    • 不能渲染标签
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./vue/vue2.js"></script>

</head>
<body>
<div id="app">
    <h1>字符串：{{name}}</h1>
    <h1>数字：{{age}}</h1>
    <h1>对象:{{userinfo}}-->取对象的值：{{userinfo.name}}</h1>
    <h1>数组：{{hobby}}--->数组取值：{{hobby[0]}}</h1>
    <h1>运算：{{11+11}}----》变量运算：{{age+userinfo.height}}</h1>
    <h1>三目运算符：{{11<10?'真':'假'}}--->变量形式：{{b?'为真':'为假'}}</h1>
    <h1>标签：{{a}}</h1>
    <h1>可以放函数执行</h1>
    <h1>var a =100---不行</h1>
    <h1>修改变量值：{{age=99}}</h1>
    <h1>修改变量值：{{++age}}--》++age和age++的区别是，前一个先计算，再赋值，后一个先赋值再计算</h1>



</div>
</body>


<script>
    // 申明变量
    var vm = new Vue({
        el: '.app',
        data: {
            h: 'hello world',
            username: 'hope',
            name: 'opp',
            age: 20,
            userinfo: {name: "小芳", height: 165},
            hobby: ['唱歌', '看电影', '玩'],
            b: true,
            a: 'a< href="https://www.baidu.com">百度一下</a>'

        }
    })


</script>

</html>
posted @ 2024-04-29 19:51  -半城烟雨  阅读(15)  评论(0)    收藏  举报