Vue 的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../assets/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1 v-text="number">{{msg}}</h1>
        <h1 v-html="content" @click="gr"></h1>
        <div :title="title" v-show="isShow">231</div>
        <button @click="show">mybutton</button>
        <input type="text" v-model="x">
        <div v-if="isshow">123</div>
        <!--<div>{{x}}</div>-->
        <!--姓<input type="text" v-model="f">-->
        <!--名<input type="text" v-model="l">-->
            <!--<div>{{all}}</div>-->
        <!--<div>{{count}}</div>-->
        <div v-for="item,index of list" :key="item">
            {{item}}
        </div>
<script>
     let app = new Vue({
         el:'#app',
         template:'',
         data:{
             msg:'world',
             number:123,
             content:'<h1>23</h1>',
             title:'this is666',
             x:'',//双向绑定必须写占位。
             f:'小',
             l:'白',
             count:0,
             isShow:true,
             isshow:true,
             list:[1,2,3,4]
         },
         computed:{ //用来计算属性的
             all:function () {
                 return this.f+''+this.l
             }
         },
         methods:{
             gr(){
                 this.content = '<h4>2</h4>'
                 //如果data中不存在，就会去computed中找这个属性，如果找不到
                 // ，就会默认在methods中找。vue的机制与node一样
             },
             show(){
                 this.isshow =!this.isshow;
                 // this.isShow=!this.isShow;
                 //v-show 不会把元素从dom中移除
                 //v-if会让元素消失
             }
         },
         watch:{ //监听
             f(){
                 this.count++;
             },
             l(){
                 this.count++;
             }
         }
     })

</script>
</body>
</html>

 v-model = 'content' {{contents}} //vue 双向视图的绑定
v-text  只能返回一个文本内容
v-html 不仅可以返回文本内容还可以返回html标签
v-for item ,index  in items :key='index'
//vue的for循环时，必须绑定一个：key的属性 不然会有一个警告 并且也会提升渲染性能。
需要注意的是 key的值不能相同，所有如果在遇到如数组的情况下 ，我们可以使用index去暂时代替。建议并希望这样做。
v-bind 可以缩写成 ：
v-on 可以缩写成@一个事件名
v-show 可以动态的让元素消失或者隐藏 但是不会让元素移除
v-if v-else v-else-if 也可让元素消失或者隐藏 但是他会直接让这个元素直接移除。
在使用双向绑定的时候。我们需要在data内进行一个占位操作。即设置一个需要解析的属性名称。
//===
methods 在vue中是用来写逻辑方法的
computed 在vue中是用来计算属性的。
watch：是用来监听某个元素或者属性的变化的。

猜你喜欢