3、vue

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h1 v-bind:id="titleId">{{ title }}</h1>
    <div>{{ content }}</div>
    <div v-html="content"></div>
    <input type="button" v-bind:value="buttonValue" />
    <div>{{ age + 1 }}</div>
    <a :href="url" target="_blank">跳转</a><br />
    <input type="button" v-on:click="login" value="登录" />
  </div>
</template>

<script>
export default {
  name: 'Value',
  props: {
    msg: String,
  },
  data() {
    return {
      title: '我的标题',
      titleId: 'h1Title',
      buttonValue: '我是按钮',
      content: "大家好，我是<b style='color:red'>张三</b>。",
      age: 18,
      url: 'http://www.baidu.com',
    }
  },
  created() {},
  methods: {
    login() {
      alert('登录方法。')
    },
    method2(){

    }
  },
}
</script>

<style>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

<template>
  <div>
    <h1>--------遍历JSON数组（常用）--------</h1>
    <ul id="ulAnimal">
      <li v-for="(animal, index) in animals" :key="index">
        {{ index }} - {{ animal.type }} - {{ animal.name }}
      </li>
    </ul>
    <h1>--------遍历对象--------</h1>
    <ul id="ulAnimal">
      <li v-for="(value,name,index) in person" :key="name">
         {{ index }} - {{ name }} -  {{ value }}
      </li>
    </ul>
    <h1>--------数组操作（常用）--------</h1>
    <ul id="ulAnimal2">
      <li v-for="(animal, index) in animals" :key="index">
        {{ index }} - {{ animal.type }} - {{ animal.name }}
      </li>
    </ul>
    动物类型：<input type="text" v-model="animalType" /><br />
    动物名称：<input type="text" v-model="animalName" /><br />
    <input type="button" value="添加" @click="addAnimal" />
    &nbsp;<input type="button" value="过滤，只保留dog" @click="filterAnimal" />
    &nbsp;<input type="button" value="查看当前的动物种类" @click="mapAnimal" />
  </div>
</template>
<script>
export default {
  name: 'List',
  data() {
    return {
      animals: [
        { type: 'dog', name: '旺财' },
        { type: 'cat', name: '小花' },
        { type: 'pig', name: '小肥' }
      ],
      person:{
          name : '张三',
          sex : '男',
          age : 12
      },
      animalType : null,
      animalName : null
    };
  },
  methods:{
       //添加动物
       addAnimal(){
           //定义要插入的对象
          let animal = {type:this.animalType,name:this.animalName}
          
          this.animals.push(animal)
          this.animalType = null
          this.animalName = null
      },
      //过滤动物
      filterAnimal: function(){
          //箭头语法，关注ES6
          let animals = this.animals.filter(s=>{
              return s.type === 'dog'
          })
          this.animals = animals
      },
      //获取指定列的动物
      mapAnimal: function(){
           let animalTypes = this.animals.map(s=>{
              return s.type
          })
          alert("当前所添加的动物种类有："+Array.from(new Set(animalTypes)))
      }
  }
};
</script>

<template>
    <div>
        <h1>地址收集</h1>
        省：
        <input type="text" placeholder="请输入省" v-model="province" /><br />
        市：<input type="text" placeholder="请输入省" v-model="city" /><br />
        具体地址：
        <input type="text" placeholder="请输入具体地址" v-model="detail" /><br />
        详细地址（Computed计算属性）：<span>{{ calAddress }}</span>
        <br />
        详细地址（Watch监听属性）<span>{{ address }}</span>
    </div>
</template>
<script>
export default {
    name : "Address",
    data(){
        return {
            province : '',
            city : '',
            detail : '',
            address : ''
        }
    },
    created(){
    },
    //计算属性
    computed:{
        calAddress(){
            // let detail = this.detail
            // detail = detail.replace(this.province,'')
            // detail = detail.replace(this.city,'')
            return this.province + this.city + this.detail
        }
    },
    //监听属性
    watch:{
        province: function(){
            this.address = this.province+this.city+this.detail
        },
        city: function(){
            this.address = this.province+this.city+this.detail
        },
        detail: function(){
            this.address = this.province+this.city+this.detail
        }
    }
}
</script>

<template>
    <div>
        <h1>--------CSS绑定--------</h1>
        <div class="border-style" :class="{'c1':c1Enable,'c2':c2Enable}">【对象语法(1)】，注意与普通css属性是叠加效果</div>
        <div :class="calCss">【对象语法(2)】，使用计算属性</div>
        <div :class="[class3,class4]">【数组语法】</div>
        <h1>--------Style绑定--------</h1>
        <div :style="{'color':c5,'font-size':c6+'px'}">【对象语法】</div>
        <div :style="[c7,c8]">【数组语法】</div>
    </div>
</template>
<script>
export default {
    name : 'Css',
    data(){
        return {
            c1Enable : true,
            c2Enable : false,
            class3 : 'c3',
            class4 : 'c4',
            c5 : 'green',
            c6 : 25,
            c7 : {
                'background-color' : 'lightblue'
            },
            c8 : {
                'color' : 'yellow'
            }
        }
    },
    computed:{
        calCss(){
            return {
                'c1':false,
                'c2':true
            }
        }
    },
    methods:{

    }
}
</script>
<style scoped>
    .c1{
        color: red;
    }
    .c2{
        font-size: 40px;
    }
    .c3{
        color: blue;
    }
    .c4{
        font-size: 30px;
    }
    .border-style{
        border-width: 2px;
        border-style:solid;
        border-color: yellow;
    }
</style>

<template>
    <div>
        <h1>--------v-if--------</h1>
        条件：type==
        <select v-model="type">
            <option value="A">A</option>
            <option value="B">B</option>
            <option value="C">C</option>
            <option value="D">D</option>
            <option value="F">G</option>
        </select><br />
        选中的值是：<span v-if="type === 'A'">
        A
        </span>
        <span v-else-if="type === 'B'">
        B
        </span>
        <span v-else-if="type === 'C'">
        C
        </span>
        <span v-else>
        其他值
        </span>
        <h1>--------v-show--------</h1>
        <div v-show="isShow">我是通过v-show来切换是否显示</div>
        <input type="button" value="显示/隐藏" @click="toggleShow" />
        <h1>--------v-if与v-show差异--------</h1>
        <div v-if="false">v-if</div>
        <div v-show="false">v-show</div>
    </div>
</template>
<script>
export default {
    name : 'ondition',
    data(){
        return {
            type : 'B',
            isShow : true
        }
    },
    watch:{
        isShow(newValue,oldValue){
            console.log(newValue)
            console.log(oldValue)
        }
    },
    methods:{
        toggleShow: function(){
            this.isShow = !this.isShow
        }
    }
}
</script>

<template>
  <div id="lifecycle">
      姓名<input type="text" ref="txtName" />
  </div>
</template>
<script>
export default {
  name : 'Lifecycle',
  data() {
    return {
      
    }
  },
  created(){
      console.log("created()方法被调用。")
      this.$refs.txtName.value = '张三'
  },
  mounted(){
      console.log("mounted()方法被调用。")
    this.$refs.txtName.value = '尼古拉斯.' + this.$refs.txtName.value
  },
  methods:{
  }
};
</script>