Vue.js部分理解1.0

vue.js

1.引包、留坑、实例化、插值表达式{{}}

  1. 引包

    • 确认已经下载了node,然后执行命令 npm install vue (如需下载自己要的版本在vue后面加上@版本号)

    • 页面引入刚下载的包

      <script type="text/javascript" src="vue.js"></script>

  2. 留坑 即留一个vue模板插入的地方或者是vue代码对其生效的地方

  3. 实例化 即启动Vue

    启动: new Vue({el:目的地,template:模板内容});实例化传入的是一个对象options

    • options
      • 目的地 el 对应上面留坑的坑位,可通过id名,类名,标签名来查找 。方式和jq一样
      • 内容 template
      • 数据 data 值为函数形式也可是对象,但是都是用函数,因为用的函数最后也是return一个对象
  4. 插值表达式{{ }}

    • 插值表达式内填入data里面的变量即可在页面取到变量值{{ data里的变量 }}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
      new Vue({
        el: '#app',
        template: `
            <div>我这里是模板内容{{msg}}</div>    //根节点只能有一个,不能并列两个div,但可以在外面写个大的div去包括,则不会报错。      
        `,
        data:function(){
          return{
            msg:'Hello vue!'
          }
        }
      })
    </script>
  </body>
</html>

2.熟悉及使用常用指令

什么是指令
  • 在vue中提供一些对于页面+数据的更为方便的操作,这些操作就叫做指令。
    • 譬如在HTML页面中这样使用<div v-xxx=''></div>
  • 在vue中v-xxx就是vue的指令
  • 指令就是以数据去驱动DOM行为的,简化DOM操作
常用的指令有哪些,及怎么使用这些指令
  • v-text 不可解析html标签,元素的innerText 必须是双标签

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <!-- 2.留坑 -->
        <div id="app"></div>
    
        <!-- 1.引包 -->
        <script type="text/javascript" src="./vue.js"></script>
    
        <!-- 3.实例化 -->
        <script type="text/javascript">
          new Vue({
            el:'#app',
            template:`
              <div>
                <div v-text="mytext"></div>
              </div>
            `,
            data:function(){
              return{
                mytext:'我这里是v-text'
              }        
            }
          })
        </script>
      </body>
    </html>
    

    //我这里是v-text

  • v-html 可解析html标签,元素的innerHTML

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <!-- 2.留坑 -->
        <div id="app"></div>
    
        <!-- 1.引包 -->
        <script type="text/javascript" src="./vue.js"></script>
    
        <!-- 3.实例化 -->
        <script type="text/javascript">
          new Vue({
            el:'#app',
            template:`
              <div>
                <div v-text="mytext"></div>
                <hr>
                <div v-html="myhtml"></div>
              </div>
            `,
            data:function(){
              return{
                mytext:'<h1>我这里是v-text</h1>',
                myhtml:'<h1>我这里是v-html</h1>'
              }
            }
          })
        </script>
      </body>
    </html>
    
    

  • v-if 做元素的插入(append)和移除(remove)操作

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
        <!-- 2.留坑 -->
        <div id="app"></div>
    
        <!-- 1.引包 -->
        <script type="text/javascript" src="./vue.js"></script>
    
        <!-- 3.实例化 -->
        <script type="text/javascript">
          new Vue({
            el:'#app',
            template:`
              <div>
                <div v-text="mytext"></div>
                <hr>
                <div v-html="myhtml"></div>
                <button v-if="checkif">测试v-if</button>
              </div>
            `,
            data:function(){
              return{
                mytext:'<h1>我这里是v-text</h1>',
                myhtml:'<h1>我这里是v-html</h1>',
                checkif:true //true表示可见,false不可见
              }
            }
          })
        </script>
      </body>
    </html>
    
  • v-else-if

  • v-else

  • v-show display:none 和display:block的切换

  • v-for

    • 数组 item,index

      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title></title>
        </head>
        <body>
          <!-- 2.留坑 -->
          <div id="app"></div>
      
          <!-- 1.引包 -->
          <script type="text/javascript" src="./vue.js"></script>
      
          <!-- 3.实例化 -->
          <script type="text/javascript">
            new Vue({
              el:'#app',
              template:`
                <div>
                  <div v-text="mytext"></div>
                  <hr>
      
                  <div v-html="myhtml"></div>
      
                  <button v-if="num==1">测试v-if</button>
                  <button v-else-if="num==2">测试v-else-if</button>
                  <button v-else>测试v-else</button>
      
                  <div v-show="checkshow">我是v-show</div>
      
                  <ul>
                    <li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li>
                  </ul>
                </div>
              `,
              data:function(){
                return{
                  mytext:'<h1>我这里是v-text</h1>',
                  myhtml:'<h1>我这里是v-html</h1>',
                  num:2,
                  checkshow:true,
                  arrayfor:['篮球','足球','乒乓球'],        
                }
              }
            })
          </script>
        </body>
      </html>
      
      

    • 对象 value,key ,index

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <!-- 2.留坑 -->
    <div id="app"></div>

    <!-- 1.引包 -->
    <script type="text/javascript" src="./vue.js"></script>

    <!-- 3.实例化 -->
    <script type="text/javascript">
      new Vue({
        el:'#app',
        template:`
          <div>
            <div v-text="mytext"></div>
            <hr>

            <div v-html="myhtml"></div>

            <button v-if="num==1">测试v-if</button>
            <button v-else-if="num==2">测试v-else-if</button>
            <button v-else>测试v-else</button>

            <div v-show="checkshow">我是v-show</div>

            <ul>
              <li v-for="(item,index) in arrayfor">{{item}}-{{index}}</li>
            </ul>

            <ul>
              <li v-for="(oj,key) in ojfor">{{key}}--{{oj}}</li>
            </ul>
          </div>
        `,
        data:function(){
          return{
            mytext:'<h1>我这里是v-text</h1>',
            myhtml:'<h1>我这里是v-html</h1>',
            num:2,
            checkshow:true,
            arrayfor:['篮球','足球','乒乓球'],
            ojfor:{play:'篮球',people:'caojun',age:'19'}
          }
        }
      })
    </script>
  </body>
</html>

3.阐述vue单双向数据流及事件绑定

vue单向数据流绑定属性值 v-bind: (属性) 简写 :(属性)

例子:

`<input v-bind:value="name" v-bind:class="name">`
  • 单向数据绑定 内存改变影响页面改变
  • v-bind就是对属性的简单赋值,当内存中值改变,还是会触发重新渲染
vue双向数据流 v-model 只作用于有value属性的元素

例子:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!--2.留坑-->
    <div id="app"></div>
    <!--1.引包-->
    <script src="./vue.js" type="text/javascript"></script>
    <!--3.实例化-->
    <script>
        new Vue({
            el: "#app",
            template:`
                <div>
                    单向数据绑定
                    <input type="text" v-bind:value="name":class="name"><br>
                    双向数据绑定
                    <input type="text" v-model="name"/>
                </div>
            `,
            data:function(){
              return{
                name:'hello'
              }
            }
        })
    </script>
</body>
</html>

  • 双向数据绑定 页面对于input的value改变,能影响内存中name变量
  • 内存js改变name的值,会影响页面重新渲染最新值
事件绑定v-on:事件名=“表达式||函数名” 简写 @事件名=“表达式||函数名”
  • 事件名可以是原生也可以是自定义的
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
    <!--2.留坑-->
    <div id="app"></div>
    <!--1.引包-->
    <script src="./vue.js" type="text/javascript"></script>
    <!--3.实例化-->
    <script>
        new Vue({
            el: "#app",
            template:`
                <div>
                    单向数据绑定
                    <input type="text" v-bind:value="name":class="name"><br>
                    双向数据绑定
                    <input type="text" v-model="name"/></br>
                    {{name}}
                    <button v-on:click="change">点击我改变name变量</button>
                </div>
            `,
            data:function(){
              return{
                name:'hello'
              }
            },
            methods:{
              change:function(){
                this.name='我改变了,实在方法属性里面定义的方法'
              }
            }
        })
    </script>
</body>
</html>

总结

v-model 双向数据绑定

  • vue页面改变影响内存(js)
  • 内存(js)改变影响vue页面

v-bind 单向数据绑定只是内存(js)改变影响vue页面

4.过滤器

  • 过滤器就是可以对我们的数据进行添油加醋然后再显示

  • 过滤器有全局过滤器和组件内的过滤器

    • 全局过滤器Vue.filter(‘过滤器名’,过滤方式fn );

      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>过滤器</title>
        </head>
        <body>
          <!--2.留坑 -->
          <div id="app">
            我输入的:<input type="text" name="" v-model='instring'><br>
            我输出的:{{instring}} <br>
            {{instring | reversal('翻转输出:')}}
          </div>
      
          <!--1.引包  -->
          <script type="text/javascript" src="./vue.js"></script>
      
          <!--3.实例化  -->
          <script type="text/javascript">
          // 全局过滤器
            Vue.filter('reversal',function(val,msg2){
              return msg2+val.split('').reverse().join('')
            })
            new Vue({
              el:'#app',
              data(){
                return{
                  instring:''
                }
              },
              //  filters:{
              //   reversal(val,msg){
              //     <!-- 字符串转数组  翻转  数组转字符串 -->
              //     return msg+val.split('').reverse().join('')
              //   }
              // }
            })
          </script>
        </body>
      </html>
      
      
    • 组件内的过滤器 filters:{ ‘过滤器名’,过滤方式fn }

      <!DOCTYPE html>
      <html lang="en" dir="ltr">
        <head>
          <meta charset="utf-8">
          <title>过滤器</title>
        </head>
        <body>
          <!--2.留坑 -->
          <div id="app">
            我输入的:<input type="text" name="" v-model='instring'><br>
            我输出的:{{instring}} <br>
            {{instring | reversal('翻转输出:')}}
          </div>
      
          <!--1.引包  -->
          <script type="text/javascript" src="./vue.js"></script>
      
          <!--3.实例化  -->
          <script type="text/javascript">
            new Vue({
              el:'#app',
              data(){
                return{
                  instring:''
                }
              },
              filters:{
                reversal(val,msg){
                  <!-- 字符串转数组  翻转  数组转字符串 -->
                  return msg+val.split('').reverse().join('')
                }
              }
            })
          </script>
        </body>
      </html>
      
      

    • {{ msg | 过滤器名}}

  • 最终都是在过滤方式fn里面return产出最终你需要的数据

vue中的this是vue封装好给我们使用的,跟平常方法里面的this是不同的
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>过滤器</title>
  </head>
  <body>
    <!--2.留坑 -->
    <div id="app">
      我输入的:<input type="text" name="" v-model='instring'><br>
      我输出的:{{instring}} <br>
      {{instring | reversal('翻转输出:')}}
    </div>

    <!--1.引包  -->
    <script type="text/javascript" src="./vue.js"></script>

    <!--3.实例化  -->
    <script type="text/javascript">
    // 全局过滤器
     console.log(this);
      Vue.filter('reversal',function(val,msg2){
        return msg2+val.split('').reverse().join('')
      })
      new Vue({
        el:'#app',
        data(){
          return{
            instring:''
          }
        },
        created(){
          console.log(this,'vue的')
        }
        //  filters:{
        //   reversal(val,msg){
        //     <!-- 字符串转数组  翻转  数组转字符串 -->
        //     return msg+val.split('').reverse().join('')
        //   }
        // }
      })
    </script>
  </body>
</html>

5.数据监听watch计算属性computed

  • 使用wach监听

    <!DOCTYPE html>
    <html lang="en" dir="ltr">
      <head>
        <meta charset="utf-8">
        <title></title>
      </head>
      <body>
          <div id="app">
            <div>watch监听数据</div>
            <input type="text" name="" v-model="msg">      
            <!-- 进行数据的双向绑定 -->
          </div>
          <script type="text/javascript" src="./vue.js"></script>
          <script type="text/javascript">
            new Vue({
              el: "#app",
              data(){
                return{
                  msg: ''
                }
              },
              watch:{
                msg(newval,oldval){
                    console.log(newval,oldval);//监听打印新旧数据
    
                }
              }
            })
          </script>
      </body>
    </html>
    
    
watch监听单个,computed监听多个

思考业务场景:

  1. 类似淘宝,当我输入某个人名字时,我想触发某个效果
  2. 利用vue做一个简单的计算器
当watch监听的是复杂数据类型的时候需要做深度监听(写法如下)
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div id="app">
        <div>watch监听数据</div>
        <input type="text" name="" v-model="msg.text">
        <!-- 进行数据的双向绑定 -->
      </div>
      <script type="text/javascript" src="./vue.js"></script>
      <script type="text/javascript">
        new Vue({
          el: "#app",
          data(){
            return{
              msg: {text:''}
            }
          },
          watch:{
            // msg(newval,oldval){
            //     // console.log(newval,oldval);//监听出新旧数据
            //     if(newval=='love'){
            //       alert(newval);
            //     }
            // }
            //开启复杂数据监听
            msg:{
                handler(newval,oldval){
                  if (newval.text=='love') {
                      alert(newval.text);
                  }
                },
                deep:true //开启数据监听,必须
            }
          }
        })
      </script>
  </body>
</html>

computed 监视对象,写在了函数内部, 凡是函数内部有this.相关属性,改变都会触发当前函数

vue做一个简单的计算器

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
      <div id="app">
        <div>watch监听数据</div>
        <input type="text" name="" v-model="msg.text">

        <!-- 进行数据的双向绑定 -->
        <div>computed计算属性</div>
        (<input type="text" name="" v-model="n1">+
        <input type="text" name="" v-model="n2">)*
        <input type="text" name="" v-model="n3"> = {{result}}
      </div>
      <script type="text/javascript" src="./vue.js"></script>
      <script type="text/javascript">
        new Vue({
          el: "#app",
          data(){
            return{
              msg: {text:''},
              n1:'',
              n2:'',
              n3:'1'
            }
          },
          computed:{
              result(){
                return (Number(this.n1)+Number(this.n2))*Number(this.n3)
              }
          },
          watch:{
            // msg(newval,oldval){
            //     // console.log(newval,oldval);//监听出新旧数据
            //     if(newval=='love'){
            //       alert(newval);
            //     }
            // }
            //开启复杂数据监听
            msg:{
                handler(newval,oldval){
                  if (newval.text=='love') {
                      alert(newval.text);
                  }
                },
                deep:true //开启数据监听,必须
            }
          }
        })
      </script>
  </body>
</html>

6.组件化开发(框架的核心)

  • 创建组件的两种方式
    • var Header = { template:‘模板’ , data是一个函数,methods:功能,components:子组件们 }//局部声明

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Title</title>
      </head>
      <body>
          <div id="app"></div>
          <script type="text/javascript" src="vue.js"></script>
          <script type="text/javascript">
              //先进行局部的声明
              var MyHeader={
                  template:`
                      <div>我是头部</div>
                  `
              }
              var MyBody={
                  template:`
                      <div>我是身体</div>
                  `
              }
              new Vue({
                  el:'#app',
                  //进行局部的注册
                  components:{
                    MyHeader,
                    MyBody
                  },
                  template:`
                      <div>
                          <my-header></my-header>
                          <my-body></my-body>
                      </div>
                  `,
                  data(){
                      return{
                      }
                  }
              })
          </script>
      </body>
      </html>
      
    • Vue.component(‘组件名’,组件对象);//全局注册 等于注册加声明了

  • 组件类型
    • 通用组件(例如表单、弹窗、布局类等)
    • 业务组件(抽奖、机器分类)
    • 页面组件(单页面开发程序的每个页面的都是一个组件、只完成功能、不复用)

组件开发三步曲:声明、注册、使用

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值