初学Vue

1、vue基本使用

1. 导入vue的库文件，在window全局就有了vue这个构造函数

2. 创建vue的实例对象

//希望vue控制的div，数据填充到div内部
<div id='app'>{{username}}</div>
​
<script>
    //创建vue的实例对象
    const vm = new Vue({
    //el属性是固定写法，表示当前vm实例要控制页面上的哪个区域，接收的值是一个选择器
    el: '#app',
    //data对象就是要渲染到页面上的数据
    data:{
        username：'zhangsan'
    }
})  
</script>

 

2、在chrome浏览器中配置vue-destory

 

3、vue的指令与过滤器

6大类的指令：

1、内容渲染

渲染DOM元素的文本内容：

• v-text

  • 内容渲染至标签内部，但会覆盖原来的内容，几乎不用

• {{}}

  • {{}}插值表达式，Mustacher，实际开发中，运用最广；

  • 只是内容的占位符，不会覆盖原有的内容；

  • 可在插值表达式中进行JavaScript表达式运算或调用函数

  • 插值表达式只能运用在内容节点中，不能运用在属性节点中

• v-html

  • 可以渲染带标签的内容

<!--  v-text  -->
<div id="app">
    <p v-text = "username"></p>
</div>
​
<script>
    const vm = new Vue({
        el: '#app',
        data: {
            username: '张三'，
            gender: '女'，
            info: '<h4 style="color:red;font-weight:">欢迎大家来学习</h4>',
            index: 3,
        }
    })
</script>
​
<!--  {{}}  -->
<p>姓名：{{username}}</p>
<p>性别：{{gender}}</p>
<div>
    1+2的结果是：{{1+2}}
</div>
<div>
    {{tips}}反转的结果是：{{tips.split('').reserve().join('') }}
</div>
<div :title="'box' + index">
    这是一个div
</div>
​
<!--  v-html  -->
<div v-html="info"></div>

 

2、属性绑定

• v-bind

  • 给属性动态绑定值,可简写为:一个冒号

<!--插值表达式只能运用在内容节点中，不能运用在属性节点中-->
<!--  v-bind  -->
<input type='text' v-bind:placeholder = "tips"/>
<input type='text' :placeholder = "tips"/>
<img v-bind:src = "photo" alt="">
​
<script>
data: {
    tips: '请输入用户名',
    photo: 'url'
}
</script>

 

3、事件绑定

• v-on

  • 为DOM元素绑定事件监听，简写为@；常见的事件均可用vue展示

• 事件修饰符

  • .prevent为vue提供的事件修饰符；.stop阻止事件冒泡；.capture

• 按键修饰符(监听键盘事件)

  • .esc .enter

• $event

<!--  v-on  -->
<button v-on:click="add">+1</button>
<button v-on:click="sub">-1</button>
//绑定事件处理函数的时候可以传递参数
<button v-on:click="add(1)">+1</button>
//简写
<button @click="add(1)">
    +1
</button>
​
<script>
    const vm = new Vue({
        data:{},
    //methods的作用，定义事件的处理函数
        medthods:{
            add:function(){
                console.log('ok')
         },
         //简写
         add(){
             console.log('ok');
             vm.vount += 1;
             //运用this
             console.log(vm === this);
             this.count += 1;
         },
         //自减
            sub(){
                vm.count -= 1;
                this.count -= 1;
            }
            //传参
            add(n){
          this.count += n;
          }
        }
    })
</script>

<!--  $event  -->
<div id="app">
    <p>count的值是：{{count}} </p>
    <button @click = "add"> +N</button>
    <!--vue提供了内置变量，名字叫做$event==原生DOM的事件对象e；默认事件对象e被覆盖，手动传递$event-->
     <button @click = "add(1,$event)"> +N</button>
</div>
<script>
const vm = new Vue({
    el: 'app',
    data: {
        count: 0,
    },
    methods: {
        add(e){
            this.count += 1;
            console.log(e)
            //偶数
            if(this.count %2 === 0){
                //奇数
                e.target.style.backgroundColor = 'red'
            }else{
                e.target.style.backgroundColor = ''
                
            }
        },
         add(n,e){
             this.cocunt += n;
            ... 
        }
    }
})
</script>

<!--  事件修饰符  -->
<div id="app">
    //prevent为vue提供的事件修饰符；.stop阻止事件冒泡；.capture
  <a href="" @click.prevent="show">跳转</a>
</div>
​
<div @click="divHeadler">
    <button @click.stop="btnHeandler">按钮</button>
</div>
<script>
const vm = new Vue({
    el: 'app',
    data: {
        count: 0,
    },
    methods: {
        show(){
            //原生阻止a链接默认跳转
            e.preventDefault()
        }
        divHeadler(){
    
}
        btnHeadler(){
            //阻止事件冒泡
            e.stopPropagation();
}
       
    }
})
</script>

<!--  按键修饰符;监听键盘事件  -->
<div id='app'>
    <input type="text" @keyup.esc="clearInput" @keyup.enter="commitAjax">
</div>
​
<script>
    const vm = new Vue({
    el: '#app',
    data:{
    },
        methods:{
            clearInput(e){
                console.log('触发了clearInput')
                e.target.value = 'b'
            }
            commitAjax(e){
        console.log('触发了commitAjax')
    }
        }
})  
</script>

 

4、双向绑定

• v-model

  • 双向数据绑定指令，在不操作DOM的前提下，快速获取表单数据

  • 双向数据绑定；数据源和视图变化，都会带动对方重新渲染或变化

  • v-bind单向数据绑定；数据源变化，视图重新渲染

  • input输入框 type="radio" type="checkbox" type="..." textarea select

  • v-model指令的修饰符.number(自动转换为数值类型) .trim(自动去除两端空格,不会处理中间的空格) .lazy(在change时更新、input时不更新)

<!--  v-model  -->
<div id='app'>
    <p>用户的名字是{{username}}</p>
    
   //v-model双向数据绑定；数据源和视图变化，都会带动对方重新渲染或变化
    <input type="text" v-model="username">
    
    //v-bind单向数据绑定；数据源变化，视图重新渲染
    <input type="text" :value="usename">
</div>
​
//这里的v-model指令失效，因为div不是表单元素
<div v-model="username"></div>
​
<select v-model="city">
    <option value="">请选择城市</option>
    <option value="1">上海</option>
    <option value="2">广州</option>
    <option value="3">背景</option>
</select>
​
<script>
    const vm = new Vue({
    el: '#app',
    data:{
        username：'zhangsan',
        city:''，//这里填入value值，将是默认展示
    }
})  
</script>

<!--  v-model指令的修饰符.number(自动转换为数值类型) .trim(自动去除两端空格,不会处理中间的空格) .lazy(在change时更新、input时不更新)  -->
<div id='app'>
    <input type="text" v-model.number="n1">+<input type="text" v-model.number="n2">=<span>{{n1+n2}}</span>
    
    <input type="text" v-model.tirm="username">
    <button @click="showName">获取用户名</button>
    
    <input type="text" v-model.lazy="username">
</div>
​
<script>
    const vm = new Vue({
    el: '#app',
    data:{
        n1: '',
        n2: '',
        username: '   zhangsan'
    },
        methods:{
        showName(){
        }
    }
})  
</script>

 

5、条件渲染

控制DOM的显示与隐藏

1. v-if:动态创建和移除元素

   • 进入页面，元素不需要显示，后期元素也不需要显示

2. v-show:用display:none;来隐藏元素

   • 常用于频繁的切换元素显示状态

   在实际开发中，不用考虑性能问题的情况下，使用v-if

3. v-else-if

<!--  v-if v-show  -->
<div id='app'>
    <p v-if="flag">这是被v-if控制的元素</p>
    <p v-show="flag">这是被v-show控制的元素</p>
</div>
​
<script>
    const vm = new Vue({
    el: '#app',
    data:{
        username：'zhangsan'
        //如果flag为true，则显示被控制的元素；如果为false则隐藏被控制的元素
        flag: true
    }
})  
</script>

 

<!--  v-else-if  -->
<div v-if="type==='A'"></div>
<div v-else-if="type==='B'"></div>//一般不用
<div v-else></div>
​

 

6、列表渲染

v-for

• item in items

  • items是待循环的数组

  • item是被循环的每一项

• v-for中的索引

  • (item,index) in items

• :key

  • 官方建议：只要用到v-for指令，那么一定要绑定一个:key属性

  • 尽量把id作为key的值

  • key的值：字符串或数字类型

  • key的值不能重复，否则终端报错：Duplicate keys detected，唯一性

  • 索引作key值，没有任何

<!--  item in items  (item,index) in items  :key  -->
<div id="app">
    <table class="table table-border table-hover table-striped">//bootstrop列表css组件
        <thead>
            <th></th>
            <th></th>
            <th></th>
        </thead>
        <tbody>
            <tr v-for="item in list">
                <td>0</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
            <tr  v-for="(item,index) in list" :title="item.title+index" :key="item.id">
                <td>{{index}}</td>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
            </tr>
        </tbody>
    </table>
</div>
​
<script>
    data:{
        list:[
            {id: 1,name: '张三'}
            {id: 2,name: '李四'}
            {id: 3,name: '王五'}
        ]
    }
</script>
​