vue框架

v-model 指令在表单控件元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。

vuejs双向绑定并不能适用于所有的html表单，限制为input、select、textarea、components。

<input type="text" v-model="msg">

<span v-text='msg'>hello<span>

v-html 更新元素或者变量的innerHTML，按普通html解析，和v-text的区别是在变量中的html标签会被浏览器解析，比如<br>会直接解析为换行

例如：<div v-html="msg"></div>

data:{
             msg:'第一行<br><hr>第二行'
          }

第一行和第二行中间有条线同时也换行了。

v-show 根据条件解析元素display的属性的真假，如果为真则display为block，假的话则为none在页面不显示。

例如：<span v-show="Show">你能看到我!</span>
          <span v-show="Hide">你能看到我吗!</span>

data:{
              Show:true,
              Hide:false
        }

我们在vue中定义了两个变量，Show为true，为true的话display的属性为block直接显示在页面中。

v-if、v-else、v-else-if,if三兄弟，条件判断，这个跟我们平时见到的if语句类似，根据表达式的值的真假条件渲染元素。在切换时元素及它的数据绑定 / 组件被销毁并重建。

例如： <p>第一组</p>
           <p>预期显示“你能看到我!”</p>
          <span v-if="Show">你能看到我!</span>
          <span v-else>你能看到我吗!</span>
          <br>
          <p>第二组</p>
          <p>预期显示“你能看到我吗!”</p>
          <span v-if="hide">你能看到我!</span>
          <span v-else>你能看到我吗!</span>
          <br>
          <p>第三组</p>
          <p>预期显示“你真的能看到我吗!”</p>
          <span v-if="hide">你能看到我!</span>
          <span v-else-if="hide">你能看到我吗!</span>
          <span v-else>你真的能看到我吗!</span>

data:{
            Show:true,
            hide:false
        }

解读： 第一组，v-if调用show,即为true。而在条件语句中，如果if为true则else中的不执行。同理我们的第一组显示第一个span标签内容。

第二组，v-if调用hide，为false。而在if语句中第一个条件为假，则执行else中的内容，因此显示第二个span标签中的内容。

第三组，我们把v-if和v-else-if属性全部设置为hide,在执行过程中v-if为false，不显示，v-else-if也为flase也不显示，前面都为假的情况我们显示v-else的内容。

1.v-else不需要表达式，但是需要跟在v-if和v-else-if后面

2.我们在实验中直接使用了true和false在实际使用中可以使用表达式，例如v-if="1>3"

循环遍历

例如：<div v-for="item in items">
               {{ item.text }}
          </div>
          <div v-for="item in items">
               {{ item.name }}
           </div>
           <div v-for="item in items">
              {{ item.text }}{{ item.name }}
           </div>
           <div v-for="item in items">
              {{ item }}
           </div>

data:{
            items:[
                {text:'hello',name:'实验楼'},
                {text:'hello',name:'vuejs'},
                {text:'hello',name:'html'},
                {text:'hello',name:'js'},
            ]
        }

上述示例中我们可以看到v-for的使用方法 items 数据对象放到一个数组里，标准json格式。 在我们使用中如果需要得到每条内容的索引，我们可以给数据添加索引。v-for="(item,index) in items"这样我们就给每条遍历出来的数据添加了索引。

绑定事件监听

<!-- 方法处理器 -->
<button v-on:click="doThis"></button>
<!-- 内联语句 -->
<button v-on:click="doThat('hello', $event)"></button>
<!-- 缩写 -->
<button @click="doThis"></button>
<!-- 停止冒泡 -->
<button @click.stop="doThis"></button>
<!-- 阻止默认行为 -->
<button @click.prevent="doThis"></button>
<!-- 阻止默认行为，没有表达式 -->
<form @submit.prevent></form>
<!--  串联修饰符 -->
<button @click.stop.prevent="doThis"></button>
<!-- 键修饰符，键别名 -->
<input @keyup.enter="onEnter">
<!-- 键修饰符，键代码 -->
<input @keyup.13="onEnter">

data:{
            msg:'单击按钮',
            name:'vuejs'
        },
methods:{
        doThis:function(e){
                console.log(this);
                //console.log(e.target.tagName);
                console.log(e.target);
                console.log('hello'+this.name+'!');
          }
 }

在页面中的按钮绑定了一个单击事件dothis，在dothis中我们在控制台中输出hello vuejs。 在vuejs中方法绑定在methods中定义。

<!-- 绑定一个属性 -->
<img v-bind:src="imageSrc">
<!-- 缩写 -->
<img :src="imageSrc">
<!-- with inline string concatenation -->
<img :src="'/path/to/images/' + fileName">
<!-- class 绑定 -->
<div :class="{ red: isRed }"></div>
<div :class="[classA, classB]"></div>
<div :class="[classA, { classB: isB, classC: isC }]">
<!-- style 绑定 -->
<div :style="{ fontSize: size + 'px' }"></div>
<div :style="[styleObjectA, styleObjectB]"></div>
<!-- 绑定一个有属性的对象 -->
<div v-bind="{ id: someProp, 'other-attr': otherProp }"></div>
<!-- 通过 prop 修饰符绑定 DOM 属性 -->
<div v-bind:text-content.prop="text"></div>
<!-- prop 绑定. “prop” 必须在 my-component 中声明。 -->
<my-component :prop="someThing"></my-component>
<!-- XLink -->
<svg><a :xlink:special="foo"></a></svg>

<style>
        .active{
            color: red;
        }
</style>

<a v-bind:class="{ active: isActive }">红色</a>

data:{
            isActive:true
            //isActive:false
        }

<div id="demo">
      <my-component></my-component>
</div>

<script>
    //注册组件，my-component为自定义标签
    Vue.component('my-component', {
          template: '<div>一个vuejs组件例子!</div>'
    })
    new Vue({
        el:'#demo'     
    })
</script>

<div id="demo">
        <my-component></my-component>
 </div>

<script type="text/tmplate-x" id="my_component-template">
        <div>一个vuejs组件例子!</div>
</script>

<script>
    Vue.component('my-component', {
         template: '#my_component-template'
     })
    new Vue({
        el:'#demo'     
    })
</script>

<div id="demo">
      <h1>{{msg}}</h1>
      <form  @submit.prevent="additem(newitem)" >
            <p>{{items.length}}</p>
            <div v-for="item in items">
                <p>{{ item.text }}</p>
            </div>
            <div>
                <input type="text" v-model="newitem.text">
            </div>
            <div>
                <button>添加</button>
            </div>
       </form>
</div>

<script>
            new Vue({
            <!--el指定的id为css选择器-->
                el:'#demo',
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验楼-->
                    msg:'实验楼第一个vuejs示例',
                    items:[
                        {text:'hello 实验楼'}
                    ],
                    newitem:{text:''}
                },
                methods:{
                    additem(newitem){
                        this.items.push(newitem)
                        this.newitem={text:''}
                    }
                }
            })
</script>

<div id="demo">
   <h1>{{msg}}</h1>
    <form  @submit.prevent="additem(newitem)" >
        <p>{{itemlenth}}</p>
            <div v-for="item in items">
                <p>{{ item.text }}</p>
            </div>
            <div>
                <input type="text" v-model="newitem.text">
            </div>
            <div>
                <button>添加</button>
            </div>
      </form>
</div>

new Vue({
            <!--el指定的id为css选择器-->
                el:'#demo',
            <!--我们的变量统统放到data中-->
                data:{
            <!--此处声明的变量msg内容为实验楼-->
                    msg:'实验楼第一个vuejs示例',
                    items:[
                        {text:'hello 实验楼'}
                    ],
                    newitem:{text:''}
                },
                computed:{
                        itemlenth(){
                         return   this.items.length
                        }
                },
                methods:{
                    additem(newitem){
                        this.items.push(newitem)
                        this.newitem={text:''}
                    }
                }
            })

undefined

undefined

绑定数据的内容

undefined

绑定数据的内容

html代码

绑定数据的内容

html代码