【VUE实战】学习笔记（一）

1. 前言：

• 插值与表达式。
• 生命周期。

2. 生命周期：

• created 实例创建完成后调用，此阶段完成了数据的观测等，但尚未挂载， $el 还不可用。
  需要初始化处理一些数据时会比较有用，后面章节将有介绍．
• mounted el 挂载到实例上后调用，一般我们的第一个业务逻辑会在这里开始
• beforeDestroy 实例销毁之前调用。主要解绑一些使用 addEventListener 监听的事件等。

3. 插值与表达式

1. v-html：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Current Time:{{time}}</h2>
    <span v-html="link"></span>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data: () => {
    return {
      msg: "hello",
      time:"",
      link:"<a href='#'>这是用v-html标签渲染的一个超链接</a>"
    };
  },
  //mounted阶段$el已经挂载，可以进行dom操作了
  mounted:function(){
    let that = this;
    setInterval(()=>{
       that.time = new Date().toUTCString();
    },1000);    
  }
};
</script>

2. v-pre:

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Current Time:{{time}}</h2>
    <p v-html="link"></p>
    <p v-pre>{{这里的内容是不会被编译的}}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data: () => {
    return {
      msg: "hello",
      time:"",
      link:"<a href='#'>这是用v-html标签渲染的一个超链接</a>"
    };
  },
  //mounted阶段$el已经挂载，可以进行dom操作了
  mounted:function(){
    let that = this;
    setInterval(()=>{
       that.time = new Date().toUTCString();
    },1000);    
  }
};
</script>

3. 表达式和三元运算符

{{}}中可以使用简单表达式和三元运算符，但是不能定义变量和使用流控制语句

    <p>{{10/4}}</p>
    <p>{{isok?"yes":"no"}}</p>
    <p>{{text.split(",")}}</p>
  </div>
</template>

4. 过滤器：

其实我更喜欢叫它为装饰器

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>Current Time:{{time}}</h2>
    <p v-html="link"></p>
    <p v-pre>{{这里的内容是不会被编译的}}</p>
    <p>{{10/4}}</p>
    <p>{{isok?"yes":"no"}}</p>
    <p>{{text.split(",")}}</p>
    <p>{{currentDate|DateFormat}}</p>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  props: {},
  data: () => {
    return {
      msg: "hello",
      time:"",
      link:"<a href='#'>这是用v-html标签渲染的一个超链接</a>",
      isok:false,
      text:"1,2,3",
      currentDate:new Date()
    };
  },
  //mounted阶段$el已经挂载，可以进行dom操作了
  mounted:function(){
    let that = this;
    setInterval(()=>{
       that.time = new Date().toUTCString();
    },1000);    
  },
  filters:{
    DateFormat:function(date){
      return date.toString();
    }
  }
};
</script>

//串联用法 
{{value | filterA|filterB}}

//接受参数(第一个参数将会是value本身)
{{value | filterA('arg1','arg2')}}

5. 指令

带有前缀v-的属性就是指令（Directives）

1. v-bind

这个指令特殊在并不是直接起效，而是对修饰的属性起作用，它的作用是告诉编辑器：这个属性的值是动态变化的，只要data中的变量值产生了变化，该属性的也会同步变化。

    <div>
      <img width="200" height="100" v-bind:src="imgUrl"/><br>
      <button v-on:click="changeImgUrl">设置图片</button>
    </div>
	...
	data: () => {
    return {
      msg: "hello",
      time:"",
      link:"<a href='#'>这是用v-html标签渲染的一个超链接</a>",
      isok:false,
      text:"1,2,3",
      currentDate:new Date(),
      imgUrl:""
    };
  },
  methods:{
    changeImgUrl:function(){
      // console.log(arguments);
      this.imgUrl = "https://csdnimg.cn/feed/20190528/35d980139a49157a2435e6564d8e2f03.jpg";
    }
  },

2. v-on

表示当被修饰的事件被触发时将会调用“=”后的方法。

    <div>
      <img width="200" height="100" v-bind:src="imgUrl"/><br>
      <button v-on:click="changeImgUrl">设置图片</button>
    </div>

	...

	  methods:{
	    changeImgUrl:function(){
	      // console.log(arguments);
	      this.imgUrl = "https://csdnimg.cn/feed/20190528/35d980139a49157a2435e6564d8e2f03.jpg";
	    }
	  },

6.语法糖：

1. “v-bind:param” 可以简写为 “:param”

缩写效果和全写效果一致，如下例“:src”等同于“v-bind:src”：

    <div>
      <img width="200" height="100" :src="imgUrl"/><br>
      <button v-on:click="changeImgUrl">设置图片</button>
    </div>

2. “v-on:method” 可以简写为 “@method”

    <div>
      <img width="200" height="100" v-bind:src="imgUrl"/><br>
      <button @click="changeImgUrl">设置图片</button>
    </div>