佛系 vue -01

1.入门

1.1 数据绑定

1. 入口

   el为挂靠的入口， 在渲染模板中绑定到名称

<div id='app'> </div>

var app =  new Vue({
    el:document.getElementById('app) // or #app
})

2. vue

   在vue文件中实现代码逻辑，名字双向绑定到渲染模板

   data段中以字典形式返回数据

   created为初始化回调

   mounted为运行时回调

   beforeDsetoryed为销毁前回调

   在methods中实现方法

<div class="hello"></div>

export default {
  name: 'HelloWorld',

  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
    }
  },
  created () {
    console.log(this.name + 'created')
  },
  mounted () {
    console.log(this.name + 'mounted')
  },
  beforeDestroy () {
  },
  methods: {
  }
}
</script>

3. 插值,指令与事件

   • {{}} 双向绑定到值
   • v-html 将返回值值解释为纯文本，不进行html转义
   • v-pre 不对{{}}指定值进行编译
   • {{|}} 管道符，可执行过滤操作，可以连续串联
   • v-if 执行布尔运算
   • v-bind (v-bind:? 或 :? ) 动态更新标签属性
   • v-on (v-on:? 或 @?)绑定监视，可进行交互，如执行回调 click\dbclick\keyup\mousemove 等

  <div class="hello">
    <h1 v-if="show_time">{{ msg }}</h1>
    <h2>{{book}}</h2>
    <h3>date:{{date|formatDate}}</h3>
    <h3 v-html="link">superlink:</h3>
    <span v-pre>{{不会被编译}}}</span>
    <h2 v-if="show_time">Essential Links</h2>
    <div>
      {{number/10}}
      {{ok?'ok':'cancel'}}
      {{text.split(',').reverse().join(',')}}
    </div>
    <div id="test_link">
      <a v-bind:href="test_href">百度搜索</a>
      <img v-bind:src="test_img">
      <button v-on:click="handleClose">点击隐藏</button>
    </div>
  </div>

<script>
const padDate = function (value) {
  return value < 10 ? '0' + value : value
}

export default {
  name: 'HelloWorld',

  filters: {
    formatDate: function () {
      let date = new Date()
      let year = date.getFullYear()
      let month = padDate(date.getMonth() + 1)
      let day = padDate(date.getHours())
      let hours = padDate(date.getHours())
      let minutes = padDate(date.getMinutes())
      let seconds = padDate(date.getSeconds())

      return year + '-' + month + '-' + day + ' ' + hours + ':' +
        minutes + ':' + seconds
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      book: 'science book',
      date: new Date(),
      link: '<a href="#">这是一个连接</a>',
      number: 100,
      ok: false,
      text: '123,456,789',
      show_time: false,
      test_href: 'https://www.baidu.com',
      test_img: 'https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_fe6da1ec.png',
    }
  },
  created () {
    this.msg = 'nothing shit happens '
    console.log(this.name + 'created')
  },
  mounted () {
    console.log(this.name + 'mounted')
    let _this = this
    this.timer = setInterval(function () {
      _this.date = new Date()
    }, 1000)
  },
  beforeDestroy () {
    if (this.timer) {
      clearInterval(this.timer)
    }
  },
  methods: {
    handleClose: function () {
      this.show_time = !this.show_time
    }
  }
}
</script>