typora-root-url: vue

Vue

v-text

  1. <body>
  2.     <div class="app">
  3.         <p> message: {{message}}</p>
  5.         <p> boolean:{{boolean}}</p>
  6.         <p> num:{{num}} </p>
  7.         <p>  {{arr[0]}}  </p>
  8.         <p v-text='num'>99</p>        // 显示是 88
  9.         <p v-text='num + 88'>99</p> // 显示是 176
  10.         <p v-for='arr '></p>
  11.     </div>
  12. </body>
  13. <script>
  14.     const app = new Vue({
  15.         el: '.app',
  16.         data: {
  17.             message: 'terencce and 2 k',
  18.             boolean: true,
  19.             num: 88,
  20.             arr:['basketball','football']
  21.         }
  22.     })
  23. </script>

v-html

  1.  <p v-html='h1Text'>99</p>
  2. <script>
  3.     const app = new Vue({
  4.         el: '.app',
  5.         data: {
  6.             message: 'terencce and 2 k',
  7.             boolean: true,
  8.             num: 88,
  9.             arr:['basketball','football'],
  10.             h1Text:'<h1>8888</h1>'
  11.         }
  12.     })
  13. </script>

v-bind

  1. <p v-bind:class='className'>  </p>
  2. <p v-bind:src='imageUrl'> </p>

用于html属性的赋值

v-for

javascript表达式

表达式：三目运算符，加法，减法，&& ,||

v-if

  1. v-if='isTrue'(underfined,null,'',0这些都表示false)
  2.                 ('string',true 这些表示true )
  5. date:{
  6.     isTrue:'' 
  8. }
  2. <p v-if=''>显示判断1
  3.     </p>
  4. <p v-else=''>显示判断2
  5.     </p>

v-show

  1. 这个是利用display:none隐藏，v-if是直接这个页面删除元素

v-model

  2. 一般用于表单元素
  3.     input,textarea,selector

如果是radio标签，

多选框

v-on:事件名

  1. 简写@click=''

阻止表单默认事件

5.1 指令

除了Vue提供的核心指令，例如v-show、v-model等，Vue也支持自定义指令，如果你需要对普通DOM元素进行底层操作，这时候就会用到指令。

驼峰命名的方式

filters:

  1.  <div class="show-box" v-for='(item,index) in historyArr'>
  2.      <p>{{ item |  intercept }}</p>
  3.      <div class="destory" @click='destory(index)'>x</div>
  4.  </div>

filter里面不能读取到data的数据，一般是用value控制

  1.  filters:{
  2.             intercept:function(value){
  3.                 console.log(value,'888',this);
  4.                 return value.toUpperCase()
  5.             }
  6.         },

Watch

Computed

`

生命周期：

编译、监听数据变化、DOM更新，退出应用

  1. beforeCreate:{}
  2. created:{}
  3. beforeMount:{}
  4. mounted:{}
  5. beforeUpdate:{}
  6. update:{}
  7. beforeDestory:{}
  8. destoryed:{}

网络请求一般放在createed和mounted都可以，一般在mounted

beforeCreated还没创建，在挂载点,在created开始拿到data的数据

component