new 前端

Vue框架，从基础入门到项目实战。看这一篇知识点全覆盖了

##放在最前面，
github 重构vancl网站
https://github.com/pengboooo/VANCL 这是地址，有喜欢的希望给个免费的start，谢谢了

安装Vue

介绍

Vue 只关注视图层，采用自底向上增量开发的设计。
在了解Vue之前你需要了解

HTML
CSS
JavaScript

安装Vue

通过CDN方式使用
示例

Staticfile CDN（国内） : https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg：https://unpkg.com/vue/dist/vue.js, 会保持和 npm 发布的最新的版本一致。
cdnjs : https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

通过npm安装
1. 初始化环境

npm init -y

安装vue

cnpm i -D vue//-d的含义是开发模式添加到依赖

写第一个vue
说实话怎么写着感觉有点像 art-template，但是比模板引擎的功能更强大。

<div id="box">
        <p>{{msg}}</p>
    </div>
    <script>
        var vm = new Vue({
            el: '#box',
            data: {
                msg: 'hello world'
            }
        })
    </script>

初识指令

数据双向绑定（v-model）

 <div id="box">
      <p v-text = 'msg'></p>  
        <input type="text" v-model ="msg"  > <!--双向绑定，只需要填写v-model -->
    </div>
    <script>
        
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'王五'
        },
        
    })
    
    </script>

标签属性的设置（v-bind || ：）

 <div id="box">
        <!-- 思考，如果我想渲染多个属性呢 -->
        <div v-bind:class='msg'></div>//可以简写为
    </div>
    <script>
        var cls = ["div1","div2","div3"]
        cls.toString = function(){
            return this.join(' ');//这里填什么都没有影响，只处理数组
        }
        
        console.log(cls);
        
    var vm = new Vue({
        el:'#box',
        data:{
            msg:cls
        }
    })
    </script>

标签内容的设置（v-text ）;

  <div id="box">
        <p v-text='msg'></p>
  </div>
  <script>
  new Vue({
      el:'#box',
      data:{
          msg:'这是一个文本'
      }
  })
  </script>

标签内容的设置（v-html ）

  <div id="box">
        <p v-html='msg'></p>
  </div>
  <script>
  new Vue({
      el:'#box',
      data:{
          msg:'这是一个文本
'
      }
  })
  </script>

监听DOM事件（v-on || @）

   <div id="div">
   <button v-on:click='setCon'>{{msg}}</button>//可以这样简写
    </div>
    <script>
    new Vue({
        el:'#div',
        data:{
            msg:'5'
        },
        methods:{
            setCon:function(e){
                this.msg++
                
            }
        }
    })
    </script>

循环（v-for）

  <div id="box">
        <ul>
             <li v-for='(item,index) in msg'>{{item+' '+index}}</li><!--循环数组支持多参数 -->
             <li v-for='(item,key,index) in obj'>{{item+' '+ key +' '+ index}}</li><!--循环对象支持多参数 -->
        </ul>
    </div>
    <script>
    new Vue({
        el:'#box',
        data:{
            msg:[1,2,3,1,4,5,4],
            obj:{
                name:"张三",
                age:'18',

            }
        }
    })
    </script>

7.computed（依赖缓存数据）与methods（不依赖缓存，每次都计算）
当data数据发生变化时就会变化

 <div id="box">
           
        {{yesNum()}}
        {{yesNum()}}
        {{yesNum1}}
        {{yesNum1}}
        {{yesNum1}}
    </div>
    <script>
        var conts =1;
    var vm = new Vue({
        el:'#box',
        data:{
            msg:'vue'
        },
        methods:{//这个每个都要重新计算一遍
            yesNum:function(){
                conts++;
                console.log(this.msg.split('').reverse().join(''));
                
                 return conts+' '+ this.msg.split('').reverse().join('')//返回字符串反转内容
            }
        },
        computed:{//这个会有缓存，之前有了不再计算直接输出
            yesNum1:function(){
                conts++;
                console.log(this.msg.split('').reverse().join(''),'se');
                
                 return conts+' '+ this.msg.split('').reverse().join('')
            }
        }
    })
    </script>

属性监听（属性改变数据跟着变化）
案例购物车

 <div id="app">
        <table>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-for="iphone in Ip_Json">
                <td>{{ iphone.id }}</td>
                <td>{{ iphone.name }}</td>
                <td>{{ iphone.price }}</td>
                <td>
                        <!-- disabled="iphone.count === 0" 里面是个表达式，当为true时禁用按钮，就不能0以下了 -->
                    <button v-bind:disabled="iphone.count === 0" v-on:click="iphone.count-=1">-</button>
                    {{ iphone.count }}
                    <button v-on:click="iphone.count+=1">+</button>
                </td>
                <td>
                    <button v-on:click="iphone.count=0">移除</button>
                </td>
            </tr>
        </table>
        总价：${{totalPrice()}}
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                Ip_Json: [{
                        id: 1,
                        name: 'iphone 8',
                        price: 5099,
                        count: 1
                    },
                    {
                        id: 2,
                        name: 'iphone xs',
                        price: 8699,
                        count: 1
                    },
                    {
                        id: 3,
                        name: 'iphone xr',
                        price: 6499,
                        count: 1
                    }
                ]

            },
            methods: {
                totalPrice: function () {
                    var totalP = 0;
                    for (var i = 0, len = this.Ip_Json.length; i < len; i++) {
                        totalP += this.Ip_Json[i].price * this.Ip_Json[i].count;
                    }
                    return totalP;
                }


            }
        })
    </script>

插值表达式闪烁问题（v-clock）

 <style>
    [v-clock]{
        display: none !important;
    }
    </style>
     <div id="box" >
        <div v-clock >{{msg}}</div>
    </div>
    <div id="box" >
        <div v-text='msg' ></div>//这样写没有闪烁问题
    </div>

事件修饰符
.stop （阻止冒泡或者捕获，后面的不触发） .prevent（阻止默认行为）.capture （事件捕获）.self（阻止自身） .once（只触发一次）

<div id="boxs">
     <div id="box" @click.capture='box1'><!--设置捕获 -->
           <div id="box2" @click.self='box2'> <!-- 阻止自身的捕获 -->
                 <div id="box3" @click.stop='box3'><!--阻止冒泡 -->
                </div>
            </div>
    </div>
    <button @click.once='one'>once</button> <!--只触发一次 -->
    <a href="www.baidu.com" @click.prevent='alert("弹出跳转")'>跳转</a> <!--阻止默认行为 -->
</div>
    <script>
        
    new Vue({
        el:'#boxs',
        methods:{
            box3(){
                console.log('触发了3');
            },
            box2(){
                console.log('触发了2'); 
            },
            box1(){
                console.log('触发了1');
            },
            one(){
                console.log('执行了');
                
            }
            
        }

    })
    
    
    </script>

事件的冒泡和捕获
1. 原生js事件的冒泡和捕获

<div class="grandfather">
    <div class="father">
      <div class="son">

      </div>
    </div>
 </div>
 <script>
    var grandfather = document.querySelector(".grandfather")
    var father = document.querySelector(".father")
    var son = document.querySelector(".son")
    grandfather.addEventListener("click", function() {
      console.log("grandfather冒泡阶段")
    }, false)

   

    father.addEventListener("click", function() {
      console.log("father冒泡阶段")
    }, false)

    // 如果某一个元素是目标阶段，谁先注册谁先执行！！！
    son.addEventListener("click", function() {
      console.log("son冒泡阶段")
    }, false)


    grandfather.addEventListener("click", function() {
      console.log("grandfather捕获阶段")
    }, true)
    father.addEventListener("click", function() {
      console.log("father捕获阶段")
    }, true)
    son.addEventListener("click", function() {
      console.log("son捕获阶段")
    }, true)
</script>

事件代理

应用为，你不知道你又多少个子元素需要加事件，或者有很多的子元素，
如果你一个一个加，不就很浪费资源。所以出现事件代理去解决

 <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
     ............我就省略重复的了
      <li>98</li>
      <li>99</li>
      <li>100</li> 
    </ul> 
    <script>
     // removeEventListener('click', 函数) 
     // 事件委托？ 通过冒泡事件，给父元素绑定事件。s
     var ul = document.getElementById('ul');
     ul.onclick = function(event) {
         console.log(event);
       console.log(event.target.innerHTML)
     }
  </script>

按键修饰符
.enter => // enter键
.tab => // tab键
.delete (捕获“删除”和“退格”按键) => // 删除键
.esc => // 取消键
.space => // 空格键
.up => // 上
.down => // 下
.left => // 左
.right => // 右

   <div id="box">
        <input type="text" @keyup='enters'>//或者@keyup.某个修饰符
    </div>
    <script>
    new Vue({
        el:'#box',
        methods:{
            enters(e){
                console.log(e.keyCode);
                
            }
        }
    })
    
    </script>
也可以固定某一个按键，这样写
 <div id="box">
        <input type="text" @keyup.enter='enters'>//或者@keyup.某个修饰符
    </div>
    <script>
    new Vue({
        el:'#box',
        methods:{
            enters(e){
                console.log(e.keyCode);
                
            }
        }
    })
    
    </script>

数据的过滤器 (filters)

 <div id="box">{{msg | num | num2}}</div>
    <script>
    new Vue({
        el:'#box',
        data:{
            msg:15,
        },
        filters:{
            num:function(val){
                console.log(val);
                return val+1
                
            },
            num2:function(val){
                console.log(val);
                return val+1
            }
        }
        
    })
    </script>

watch（支持异步代码）handlar

	 watch: {//某数据改变时触发
		 	check:{//要监听值的名称
		 		handler(newName, oldName) {
     					 this.fullName = newName + ' ' + this.lastName;
   					 },
   		 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
   						 immediate: true
   					  监听数值是不是要深度监听
						deep: true,
		 		},

v-if和v-show

 <p v-if="msg">{{msg}}</p>直接删除标签
        <p v-show="msg">{{msg}}</p>不会删除标签。在标签上添加display属性

template模板标签，只支持v-if 和v-else
有三种写法
//第1种模板写在构造器里
//template:

`我是选项模板2`

//第2种模板 写在

Vue框架，从基础入门到项目实战。看这一篇知识点全覆盖了

安装Vue

介绍

安装Vue

初识指令

我是选项模板2

你可能感兴趣的:(Vue全家桶)

`我是选项模板2`