VUE基础 and VUE指令

vue初始化

  <!-- DOM挂载点 -->
  <div id="app">
    <!-- 标签中可以直接渲染data中的数据 也可以写简单的逻辑 -->
    <!-- {
    
    {}} 是vue渲染数据状态的标签 -->
    {
   
   {text}}
  </div>

  <script src="../js/vue.js"></script>

  <script>
    // vue初始化的对象 叫做vue的根组件
    new Vue({
     
     
      // vue代码的挂载点 vue代码必须在挂载点内才会生效
      // 挂载点的第一种方式
      el:'#app',
      // 只有根组件的data是一个对象 data用来储存数据状态
      data:{
     
     
        text:'helle world'
      }
    })//.$mount('#app)  //挂载点的第二种方式
  </script>

vue 指令

vue的指令是vue的一个核心功能他可以帮助开发者快速高效的完成很多的逻辑
vue的指令写法基本都是以 v-指令名的形式，指令一般都是在开始标签的后面
vue的指令后面的值是变量，不需要使用{ {}}标签包裹

v-html 和 v-text

v-html 会把变量中的标签解析出来让浏览器直接渲染标签中的内容他会把对应的标签结构出来使用该指令的元素内部（参照innerHtml）
v-text 会把对应的值当成字符串直接渲染出来不会解析标签（参照innerText）

  <div id="app">
    <!-- 指向data中的一个变量（html） -->
    <h3 v-html="html"></h3>
    <!-- 指向data中的一个变量（text） -->
    <h3 v-text="text"></h3>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      el:'#app',
      data:{
     
     
        html:'hello world',
        text:'你好 世界'
      }
    })
  </script>

v-if 和 v-show

v-if的作用

当他的值是true时，会新增相对于的元素
当他的值是false时，会把元素删除掉
也就是说v-if是通过新增或删除的方式来控制DOM的显示可隐藏

v-show的作用

当他的值是true时，该指令对应的元素就会显示出来
当他的值是false时，该指令对应的元素就会添加一个display:none;的样式，从而把该元素隐藏
也就是说v-show是通过css样式来控制，元素的隐藏和显示的

  <div id="app">
    <ul>
      <li>01 <span v-if="if_v">hello world</span></li>
      <li>02 <span v-if="!if_v">hello world</span></li>
      <li>03 <span v-if="if_v">hello world</span></li>
      <!-- 01和03中的hello world会显示  02被删除了 -->
    </ul>

    <ul>
      <li>001 <span v-show="!show_v">hello world</span></li>
      <li>002 <span v-show="show_v">hello world</span></li>
      <li>003 <span v-show="show_v">hello world</span></li>
      <!-- 02和03中的hello world会显示  01被隐藏了 -->
    </ul>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      el:'#app',
      data:{
     
     
        if_v:true,
        show_v:true
      }
    })
  </script>

v-for

v-for是一个循环指令（数据迭代指令）v-for循环的所有参数都可以自定义命名
v-for循环数组时第一个参数是数组项，第二个参数是数组的索引值
v-for循环对象时，有三个参数，第一个参数是值第二个参数是键第三个是索引值

  <section id="box">
    <!-- 循环数组 -->
    <!-- item可以自定义命名  -->
    <!-- item是数组项 -->
    <h3 v-for="item in arr">
      {
   
   {item}}
    </h3>
    <!-- 循环对象 -->
    <h3 v-for="i in arr_1">
      {
   
   {i.name}}
    </h3>
    <!-- 循环数组 两个参数时 -->
    <h3 v-for="(i,index) in arr_1">
      {
   
   {i.name}}
      {
   
   {index}}
    </h3>
    <!-- 循环对象三个参数时 -->
    <!-- 第一个参数是值  第二个参数是键  第三个是索引值 -->
    <h3 v-for="(value,key,index) in obj">
      {
   
   {value}}
      {
   
   {key}}
      {
   
   {index}}
    </h3>

    <!-- 循环复杂数组时 -->
    <h3 v-for="i in address">
      {
   
   {i.name}}
      <ul>
        <li v-for="shi in i.shi">
          {
   
   {shi.name}}
          <p v-for="qu in shi.qu">
            {
   
   {qu.name}}
          </p>
        </li>
      </ul>
    </h3>

  </section>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      el:'#box',
      data:{
     
     
        arr:['韩信','吉吉国王','裴擒虎','百里玄策','李白'],

        arr_1:[
          {
     
     name:'韩信'},
          {
     
     name:'吉吉国王'},
          {
     
     name:'裴擒虎'},
          {
     
     name:'百里玄策'},
          {
     
     name:'李白'},
        ],

        obj:{
     
     
          name:'lili',
          age:19,
          '爱好':'吃'
        },

        address:[
          {
     
     
            name:'河南',
            shi:[
              {
     
     
                name:'郑州',
                qu:[
                  {
     
     
                    name:'中原区',
                  },
                  {
     
     
                    name:'金水区',
                  },
                  {
     
     
                    name:'二七区',
                  }
                ]
              },
              {
     
     
                name:'驻马店',
                qu:[
                  {
     
     
                    name:'驿城区',
                  },
                  {
     
     
                    name:'二程区',
                  },
                  {
     
     
                    name:'山城区',
                  }
                ]
              },
            ]
          },
          {
     
     
            name:'安徽',
            shi:[
              {
     
     
                name:'合肥',
                qu:[
                  {
     
     
                    name:'1区',
                  },
                  {
     
     
                    name:'2区',
                  },
                  {
     
     
                    name:'3区',
                  }
                ]
              },
              {
     
     
                name:'阜阳',
                qu:[
                  {
     
     
                    name:'4区',
                  },
                  {
     
     
                    name:'5区',
                  },
                  {
     
     
                    name:'3区',
                  }
                ]
              },
            ]
          }
        ]

      }
    })

  </script>

v-on

在vue中可以通过v-on指令去绑定事件包括鼠标事件和键盘事件以及自定义事件
v-on 还可以缩写成 @
v-on绑定的函数后面的（）可以写可以不写

当不写（）时，有一个默认的参数，该参数是事件对象’Event’

当写（）时，可以传递参数，如果需要事件对象时，则可传递一个‘$event’该参数就是事件对象，该参数不能随意命名

事件还有各种修饰符

“.stop”
“.prenent”
“.captuer”
“.self”
“.once”
“.passive”

vue 中有很多修饰符修饰符通过在事件后面用 .修饰符名的形式来写，修饰符可以串联

v-on:click.stop.prevent.self=“fun”

@click.stop.prevent.self

  <!-- 把input的value值，输入到P标签 -->
  <div id="app">
    <input type="text" name="" id="ipt">
    <button id="but" @click="fun">Add</button><br>
    <p v-for="item in str" id="text">{
   
   {item}}</p>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      el:'#app',
      data:{
     
     
        str:[]
      },
      // methods  是vue方法的集合
      methods:{
     
     
        fun(){
     
     
          let app = document.querySelector('#app')
          app.style.borderColor = '#000'

          let value = document.querySelector('#ipt').value
          if(value !== ""){
     
     
            this.str.push(value)
          }
        }
      }
    })
  </script>

v-bind

v-bind是一个绑定指令他可以绑定标签中的所有属性，自定义属性也可以绑定

v-bind 可以简写那就是不写v-bind （如下实例）

  .active {
    
    
      color: red;
    }

  <div id="app">
    <button @click="fun">点击</button>
    <!-- 简写形式 -->
    <div :class="[box]">hello world</div>
    <!-- 常规形式 -->
    <!-- <div v-bing:class="[box]">hello world</div> -->
  </div>
  <script src="../js/vue.js"></script>
  <script>
    new Vue({
     
     
      el: '#app',
      data: {
     
     
        box: ''
      },
      methods: {
     
     
        fun() {
     
     
          this.box = 'active'
        }
      }
    })
  </script>

v-model

v-model数据双向绑定通常用于表单

  <div id="box">
    <input type="text" v-model="value" name="" id="">
    <button @click="getData">提交</button>
    <button @click="changeValue">改值</button>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      el:'#box',
      data:{
     
     
        value:''
      },
      methods:{
     
     
        getData(){
     
     
          console.log(this.value)
        },
        changeValue(){
     
     
          this.value = "值已经改变"
        }
      }
    })

  </script>

v-pre

v-pre 跳过这个元素和他的子元素的编译过程可以用来实现原始的Mustache标签跳过大量没有指令的节点加快编译

  <div id="box">
    <p v-pre>{
   
   {str}}</p>
  </div>
  
  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      data:{
     
     
        str:'文本内容'
      }
    }).$mount('#box')
  </script>

v-cloak

这个指令可以隐藏未编译的Mustache标签直接到实例准备完毕
配合css使用

css

   [v-cloak]{
    
    
      display: none;
    }

html

  <div id="box">
    {
   
   {str}}
    <ul v-cloak>
      <li v-for="item in arr">{
   
   {item}}</li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue ({
     
     
      data:{
     
     
        arr:['和平精英','穿越过线','QQ飞车','王者荣耀'],
        str:'你是个麻灰'
      }
    }).$mount('#box')
  </script>

v-once

v-once 只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能

  <div id="box">
    <ul v-once>
      <li v-for="(item,i) in arr">
        {
   
   {item.name}}
        {
   
   {i}}
      </li>
    </ul>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    new Vue({
     
     
      data:{
     
     
        arr:[{
     
     name:'001',name:'002',name:'003',name:'004'}]
      }
    }).$mount('#box')
  </script>

computed 计算属性

计算属性将被混入到 Vue 实例中。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。

注意如果你为一个计算属性使用了箭头函数，则 this 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问。

计算属性需要返回值计算属性本身的函数会作为vue实例对象的一个属性返回值会作为改属性的值
因为是属性，所以计算属性的函数不能使用的时候调用
计算属性的值只有在他依赖的数据发生变化的时候才会再次计算
因此在一个数据需要多次使用并且值是一样的时候强烈建议使用计算属性因为可以提高代码执行效率

  <div id="app">
    时间：{
   
   {changeTime}}
    <button @mouseover="fun">你过来啊</button>
  </div>

  <script src="../js/vue.js"></script>

  <script>
    var vm = new Vue({
     
     
      el: '#app',
      data: {
     
     
        createTime:'2000-04-15 12:50:13',
      },
      methods: {
     
     
        fun(){
     
     
          this.createTime = new Data()
        }
      },
      computed:{
     
     
        changeTime() {
     
     
          let data = new Data(this.createTime)
          let year = data.getFullYear()
          let month = data.getMonth()
          let day = data.getData()
          month = month > 9 ? month :'0' + month
          return `${
       
       year}-${
       
       month}-${
       
       day}`
        }
      },
    });
  </script>

watch 监听

一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch()，遍历 watch 对象的每一个 property。

监听vue中的数据和状态发生的变化

  <div id="app">
    <button @click="fun">点击看变化</button>
  </div>

  <script src="../js/vue.js"></script>
  <script>
    // watch 监听vue的数据变化
    var vm = new Vue({
     
     
      el: '#app',
      data: {
     
     
        value:'11111111',
        str:"被这风吹散的人，说他爱的不深",
        obj:{
     
     
          name:"毛巨星",
          age:26,
        },
        arr:['来根华子','街溜子'],
        arr_f:[{
     
     name:'仔仔'}]
      },
      methods: {
     
     
        fun(){
     
     
          this.value = '555555555555'
          this.str = '被这雨淋湿的人，说他不会冷'

          this.obj.name = "毛不易"
          this.obj.age = 56

          // 数组发生的变化是可以直接监听的  但是数组项发生的变化监听不到
          // this.arr[0] = "奥利给"
          this.arr.push('奥利给')
          this.arr_f[0]['typr'] = '老八秘制小汉堡'
        }
      },
      watch:{
     
     
        // // value 是要监听的数据 第一个参数是数据改变后的值  第二个参数是数据改变之前的值
        // value(to,from){
     
     
        //   console.log(to + '·····我是新值')
        //   console.log(from + '·····我是老值')
        // },


        // str(to,from){
     
     
        //   console.log(to + '·····我是新值')
        //   console.log(from + '·····我是老值')
        // },


        // 监听对象中的某一个属性的值发生改变
        // 'obj.name'(to,from){
     
     
        //   console.log(to + '·····我是新值')
        //   console.log(from + '·····我是老值')
        // }

        // 错误示范
        // obj(to,from){
     
     
        //   console.log(to + '·····我是新值')
        //   console.log(from + '·····我是老值')
        // }

        // 深度监听
        // 深度监听 他可以只要对象的某个值发生改变时监听到对象发生的变化
        // obj:{
     
     
        //   deep:true,
        //   handler(to,from){
     
     
        //     console.log(to)
        //     console.log(from)
        //   }
        // }



        // 错误示范
        // arr:{
     
     
        //   deep:true,
        //   handler(to,from){
     
     
        //     console.log(to,from)
        //   }
        // }

        // arr(to,from){
     
     
        //   console.log(to,from)
        // }


        arr_f:{
     
     
          deep:true,
          handler(to,from){
     
     
            console.log(to,from)
          }
        }
        
        // 错误示范
        // arr_f(to,from){
     
     
        //   console.log(to,from)
        // }
      }
    });
  </script>

VUE基础 and VUE指令

vue初始化

vue 指令

v-html 和 v-text

v-if 和 v-show

v-if的作用

v-show的作用

v-for

v-on

事件还有各种修饰符

v-bind

v-model

v-pre

v-cloak

v-once

computed 计算属性

watch 监听

猜你喜欢