3.8

116 阅读1分钟

nmp安装vue2

nmp init -y

Npm i vue@2

页面中,首先引用vue.js文件 然后给div一个id,new Vue挂载el:"id的名字"

<script>
    new Vue({
        el:"#app",
        data:{
           
        }
    })
    
    双向数据绑定
     <div id="app">
    <input type="text" v-model="str">
    <h1>{{str}}</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:'#app',
        data:{
            str:'您好:'
        }
    })
</script>
插值表达式的用法
 <div id="app">
    <p>Message:{{str}}</p>
    <h1>{{strr+1}}</h1>
    <h1 v-if="flag">YES</h1>
    <h1 v-else>NO</h1>
</div>
<script src="./node_modules/vue/dist/vue.min.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            str:'今天天气不错',
            strr:"20",
            flag:true
        },
        
        
    })
</script>