声明式渲染

image.png

标签的特性和属性

特性：标签自己有的
属性：标签的自定义属性

绑定属性，特性

v-bind:

通过v-bind: 绑定
绑定后的属性，就可以使用变量，如下：
str2就是变量，而不是字符串了
image.png

条件判断

v-if = “”

性能消耗高，适合用在广告关闭
v-if 可以删除一个节点（v-if = “false”），反之生成（显示）
image.png
image.png

v-show = “”

显示或隐藏节点（不是删除），性能消耗低

v-for = “item in items”

使用v-for 时要加以一个 :key = “item” ， 否则会有警告（eslint给的警告）
image.png
image.png


  1. <template>
  2. <!-- template中只能放一个标签 -->
  3.   <div id="app">
  4.     <img alt="Vue logo" src="./assets/logo.png">
  5.     <demoD></demoD>
  6.     <div>{{list}}</div>
  7.     <div>{{user}}</div>
  8.     <ul>
  9.       <!-- :key中的值只能是v-for中已经声明的变量 -->
  10.       <!-- 数组和对象的遍历方式一样 -->
  11.       <li v-for="(item,index) in list" :key="index">
  12.         {{item}}
  13.       </li>
  14.       <li v-for="(item) in user" :key="item">
  15.         {{item}}
  16.       </li>
  17.     </ul>
  18.   </div>
  19. </template>
  21. <script>
  22. //引用一个组件
  23. import demoD from './components/demo-d.vue'
  25. export default {
  26.   //name: 'App',
  27.   //注册一个组件
  28.   components: {
  29.     demoD
  30.   },
  31.   // 数据
  32.   data() {
  33.     return {
  34.       list:[1,2,3,4,5],
  35.       user:{
  36.         infos:'你个傻挂',
  37.         email:'nigeshabi@qq.com',
  38.         uname:'阿呆',
  39.         sex:'男',
  40.         age:'17'
  41.       },
  42.       isShow:true,
  44.     }
  45.   },
  46.   // 事件处理函数
  47.   methods:{
  49.   }
  50. }
  51. </script>
  53. <style>
  54. </style>

双向绑定 v-model

  1. <div class="cla">{{message}}</div>
  4. <input type="text" v-model="message">

vue实例

创建vue实例

当创建一个 Vue 实例时，你可以传入一个选项对象。

  1. var vm = new Vue({
  2.   // 选项
  3. })

所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象 (一些根实例特有的选项除外)。