Vue新手村任务之Vue常用指令

Vue新手村任务之Vue常用指令

　　首先看下这个文件长什么样  在编辑器中很容易就发现分成了三个部分  <template> 里面是写html的  <script>里面写vue的逻辑层  <style>里面写vue的样式 scoped表示该文件的css单独打包成一个css  是一个单独作用的css 

　　看下之后全部删除 之后写  注意<template>里面必须要有一个根div包裹住里面的东西

<template>
  <div>

　　　　<h1>hello vue</h1>

  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

　　在看网页有一张图片和一句hello vue   打开App.vue 把里面的图片标签删除。

　　现在想这样一个问题，能不能用数据在网页上显示 如果按照js的思路来 那么会使用.innerhtml方法在网页上进行输出，而在vue里面则是这样输出的

<template>
  <div>
    <h1>{{msg}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:'hello vue'
    }
  }
}
</script>

<style>

</style>

在vue里面数据存放于data中，data可以简单粗暴的理解为是一个函数 里面有个名为val的参数 使用两个花括号的扩起来的这个值就是从data函数里面拿的值，但是注意  data函数里面必须有return且里面的值必须以键值对的形式存在  否则就会报错

下面开始介绍三个指令 v-show  v-for 和v-if指令

现在有这么一个需求 有0到9的数字先输出0-9 如果是js或者jq是先循环之后再.innerhtml在网页上输出 vue的逻辑也差不多但是写法上有点不一样 使用的是v-for指令

<template>
  <div>
    <div v-for="item in 9" :key="item"  >
        <h1>{{item}}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:'hello vue',
    }
  }
}
</script>

<style>

</style>

这样就循环出来了  那么如果是输出奇数呢？ 使用v-if进行判断  或者使用v-show   但是注意两者的区别：v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。 v-show更多的是更改他的css的display样式的改变

<template>
  <div>
    <div v-for="item in 9" :key="item" v-if="item%2 != 0"  >
        <h1>{{item}}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:'hello vue',
    }
  }
}
</script>

<style>

</style>

 

<template>
  <div>
    <div v-for="item in 9" :key="item" v-show="item%2 != 0"  >
        <h1>{{item}}</h1>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return {
      msg:'hello vue',
    }
  }
}
</script>

<style>

</style>

再说点其他的指令

<span v-text="msg"></span>
<!-- 和下面的一样 -->
<span>{{msg}}</span>

v-html这个指令一般是用于后台传过来的富文本的时候才用的
v-bind:是绑定属性的时候用的  但是一般用它都是简写成:  比如说绑定image的src地址为一个变量
Vue还提供了一个很有用的指令双向数据绑定 v-model 注意这个指令只能绑定在有焦点的上面使用比如input select textarea之类的东西 绑定在div上面是无效的

<template>
  <div>
    <input type="text" v-model='inputValue' >
    <h1>{{inputValue}}</h1>
  </div>
</template>

<script>
export default {
  data(){
    return {
      inputValue : null,
    }
  }
}
</script>

<style>

</style>

 

　　

 

posted on 2018-08-02 16:38  另一种失败 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/qiaohong/p/9408040.html