Vue2.5入门-1

2019-03-27 22:50:05 作者：互联网

vue如何引用和使用，实例和挂在点的介绍

<!DOCTYPE html>
<html>
<head>
  <title>vue 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="root">
      // <h1>hellow {{msg}}</h1> //方式一的模板
  </div> //挂载点
  <script>
      new Vue({   //一个vue实例
          el: "#root" , //绑定挂载点
          template: '<h1>hellow {{msg}}</h1>' //方式二的模板
          data: { 
              msg: "hellow word"
          }
      })
  </script>
</body>
</html>

挂载点，模板和实例

Vue实例中的数据，事件和方法

插值表达式与v-text和v-html

//插值表达式 {{mgs}}

//标签绑定内容 v-text和v-html
<body>
  <div id="root">
      {{msg}}
      <h1 v-text="number"></h1>
      <h1 v-html="number"></h1>
  </div>
  <script>
      new Vue({
          el: "#root" ,//和哪一个dom节点绑定
          data: {
              msg: "hellow word",
              number: '<span>123</span>'
          }
      })
  </script>
</body>

//v-text 输出 <span>123</span> 会转义
//v-html 输出 123 不会转义

事件函数v-on ，注意v-on: = @

<h1 v-text="number" @click="handleClick"></h1>
<h1 v-html="number" v-on:click="()=>{alert(123)}"></h1>

methods:{
 // handleClick: function(){
 //   alert(321);
 // }
 handleClick: function(){
     this.msg = "world";
 }
}

Vue 中的属性绑定和双向数据绑定

属性绑定v-bind，注意v-bind: = :

<div id="root" v-bind:title="title">
      {{content}}
</div>

双向数据绑定，v-model

<div id="root" v-bind:title="title">
 <input  v-model="content">
 <div>{{content}}</div>
</div>

Vue中的计算属性和侦听器

计算属性，作用是将以前计算过的相同值做缓存，可以提高效率

侦听器，监测某一个数据或计算属性发生变化

<!DOCTYPE html>
<html>
<head>
  <title>vue 入门</title>
  <script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
  <div id="root">
      姓<input v-model="firstName"/>
      名<input v-model="lastName"/>
      <div>{{fullName}}</div>
      <div>{{count}}</div>
  </div>
  <script>
      new Vue({
          el: "#root" ,//和哪一个dom节点绑定
          data: {
              firstName: '',
              lastName: '',
              count: 0
          },
          computed: {//计算属性
              fullName: function(){
                  return this.firstName + this.lastName;
              }
          },
          watch: { //侦听器
              // firstName: function(){
              //  return this.count++;
              // },
              // lastName: function(){
              //  return this.count++;
              // }
              fullName: function(){
                  this.count++;
              }
          }
      })
  </script>
</body>
</html>

v-if，v-show，v-for指令

v-if和v-show的区别，v-if会将元素从dom节点删除，但v-show不会

v-for中v-bind:key

<div id="root">
 <div v-show="isShow">hello word</div>
  <button @click="isShow1">toggle</button>
  <ul>
      <li v-for="(item,index) of list" :key="index">{{item}}</li>
  </ul>
</div>
<script>
  new Vue({
  el: "#root" ,//和哪一个dom节点绑定
     data: {
      isShow: true,
         list: [1,1,3]
     },
     methods: {
         isShow1: function(){
              this.isShow = !this.isShow;
         }
     }
 })
</script>

标签：function,count,Vue,入门,el,绑定,msg,Vue2.5
来源： https://www.cnblogs.com/TomAndJerry/p/10611606.html