Vue

{{ }}：插值；插值里面只能写表达式，不能写语句

指令：

v-text=“js值”：渲染text内容

v-html=“js值”：渲染html内容

v-for=“item in js值 / item of js值 / ( item, index ) in js值”：循环创建dom

v-if="js条件"：满足条件就创建dom；v-else跟在v-if后

v-show="js条件"：满足条件就显示，不满足就添加css样式display: none;跟v-if不同的是，标签一直会存在。

v-on:click="函数名/表达式"：绑定事件调用函数/执行表达式；可简写为@click；函数名可以加括号，可不加括号，不加括号，事件默认获取的是event，加括号可以传递任意参数，如果要获取event就传$event

@keyup.ctrl.enter：按ctrl+enter触发事件；

v-bind:title="js值"：使用Vue定义的变量设为title的值；可简写为:title

v-cloak：配合css代码；当Vue代码还没加载完成时，此时标签样式就会应用css里[v-cloak]{ }的样式，Vue代码加载完后就会取消掉css里的样式

v-model：

多个复选框，绑定到同一个数组：


  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
})

原理：


  
  Jack
  
  John
  
  Mike
  

  Checked names: {{ checkedNames }}

new Vue({
  el: '#example-3',
  data: {
    checkedNames: []
  }
  methods: {
    checkedEvent (e) {
    //记录value值   
    const v = e.target.value
         //查看数组中是否有此value值
          if(this.checkedNames.includes(v)){
            this.checkedNames = this.checkedNames.filter(item => {
                //filter()把传入的函数依次作用于每个元素，然后根据返回值是true还是false决定保留还是丢弃该元素。
              return item !== v
            })
          }
          else{
            this.checkedNames.push(v);
          }
        }
    }
})

Vue中style样式

//应用a的样式
//应用b的样式

注意：

Vue里面的方法必须写在methods里面

Vue里面的this指Vue的实例

computed：计算属性

它是有依赖缓存的，只有它所依赖的数据发生了改变，才会重新计算。这个计算出来的值，是可以直接当成data来用的，也就是说在用的时候，不需要添加()。这个必须要有一个return值

计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。

methods：方法

每次有数据更改，只要在模板里有使用这个方法，这个方法就会执行。它是没有缓存的。

每当触发重新渲染时，调用方法将总会再次执行函数。

watch：侦听属性

观测已有数据的。

当你有一些数据需要随着其它数据变动而变动，不能乱用

filters：过滤器

可被用于一些常见的文本格式化。


{{ message | capitalize }}

filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}

ajax

const app = new Vue({
      el: '#app',
      data: {
        todos: []
      },
      // 一般的ajax请求都会放在这里面来做，这个是固定的，后面会讲到的生命周期中的一个方法
      created() {
        fetch('https://jsonplaceholder.typicode.com/todos')
          .then(response => response.json())
          .then(json => this.todos = json)
      }
    })

axios

基于promise用于浏览器和node.js的http客户端+

axios.get('https://jsonplaceholder.typicode.com/todos')
          .then(resp => {
            // 这里是和后端约定好的一个状态，可以是任何的key, 只要约定好就行。
            if (resp.status === 200) {
              // 这里才是成功的逻辑
              this.todos = resp.data
            } else {
              // 处理错误的逻辑
            }
          })
          .catch(err => {
            // 处理错误的逻辑
          })

自定义配置创建实例

axios.create([config])



const ajax = axios.create({
      baseURL: 'https://jsonplaceholder.typicode.com'
    })
   ajax.get('/todos')
          .then(resp => {
            // 这里是和后端约定好的一个状态，可以是任何的key, 只要约定好就行。
            if (resp.status === 200) {
              // 这里才是成功的逻辑
              setTimeout(() => {
                this.todos = resp.data
                this.isLoading = false
              }, 3000)
            } else {
              // 处理错误的逻辑
            }
          })
          .catch(err => {
            // 处理错误的逻辑
          })

当做项目时，需要把外部引用的东西扩展到Vue上就用此方法

// 在Vue这个对象的原型上扩展一个$http 让它指向于axios, 那么在实例上就可以直接使用this.$http来使用axios了
    Vue.prototype.$http = axios

初学Vue

Vue

你可能感兴趣的:(初学Vue)