Vue_01 vue的基础指令和修饰符

1. Vue 引言

渐进式 JavaScript 框架 --摘自官网

# 渐进式
   1. 易用  html css javascript
   2. 高效  开发前端页面 非常高效 
   3. 灵活  开发灵活 多样性

# 总结
		Vue 是一个javascript 框架 js 简化页面js操作
		bootstrap 是一个css框架  封装css

# 后端服务端开发人员: 
		Vue 渐进式javascript框架: 让我们通过操作很少的DOM,甚至不需要操作页面中任何DOM元素,就很容易的完成数据和视图绑定 ====> 双向绑定 MVVM  

# Vue 作者
 	尤雨溪   国内的    

---

2. Vue入门

2.1 下载Vuejs

//开发版本:
	<!-- 开发环境版本，包含了有帮助的命令行警告 -->
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

//生产版本:
	<!-- 生产环境版本，优化了尺寸和速度 -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

2.2 Vue第一个入门应用

<div id="app">
        {
   
   { msg }}  {
   
   {username}} {
   
   {pwd}}

        <br>
        <span>
            {
   
   { username }}
            <h1>{
   
   { msg }}</h1>
        </span>
				
   </div>
		<!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
            el:"#app",  //element 用来给Vue实例定义一个作用范围
            data:{
      
            //用来给Vue实例定义一些相关数据
                msg:"百知欢迎你,期待你的加入!",
                username:"hello Vue!",
                pwd :"12345",
            },
        });
    </script>	

    

# 总结:
			1.vue实例(对象)中el属性: 	代表Vue的作用范围  日后在Vue的作用范围内都可以使用Vue的语法
			2.vue实例(对象)中data属性: 用来给Vue实例绑定一些相关数据, 绑定的数据可以通过{
   
   {变量名}}在Vue作用范围内取出
			3.在使用{
   
   {}}进行获取data中数据时,可以在{
   
   {}}中书写表达式,运算符,调用相关方法,以及逻辑运算等
			4.el属性中可以书写任意的CSS选择器[jquery选择器],但是在使用Vue开发是推荐使用 id选择器  注意: el属性值不能指定body或html标签

---

3. v-text和v-html

3.1 v-text

v-text:用来获取data中数据将数据以文本的形式渲染到指定标签内部 类似于javascript 中 innerText

		<div id="app" class="aa">
        <span >{
   
   { message }}</span>
        <span v-text="message"></span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                message:"百知欢迎您"
            }
        })
    </script>

# 总结
				1.{
   
   {}}(插值表达式)和v-text获取数据的区别在于 
				a.使用v-text取值会将标签中原有的数据覆盖 使用插值表达式的形式不会覆盖标签原有的数据
				b.使用v-text可以避免在网络环境较差的情况下出现插值闪烁

3.2 v-html

v-html:用来获取data中数据将数据中含有的html标签先解析在渲染到指定标签的内部 类似于javascript中 innerHTML

<div id="app" class="aa">
        <span>{
   
   {message}}</span>
        <br>
        <span v-text="message"></span>

        <br>
        <span v-html="message">xxxxxx</span>
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                message:"<a href=''>百知欢迎您</a>"
            }
        })
    </script>

---

4.vue中事件绑定(v-on)

4.1 绑定事件基本语法

    <div id="app">
        <h2>{
   
   {message}}</h2>
        <h2 v-text="message"></h2>
        <h2>年龄:{
   
   { age }}</h2>
        <br>
        <input type="button" value="点我改变年龄" v-on:click="changeage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
            el:"#app",
            data:{
      
      
                message:"hello 欢迎来到百知课堂!",
                age:23,
            },
            methods:{
      
        //methods 用来定义vue中时间
                changeage:function(){
      
      
                    alert('点击触发');
                    this.age//代表当前vue实例
                    this.aa();//代表调用方法
                },
                aa:function(){
      
      }
            }
        })
    </script>

# 总结:
		事件  事件源:发生事件dom元素  事件: 发生特定的动作  click....  监听器  发生特定动作之后的事件处理程序 通常是js中函数
		1.在vue中绑定事件是通过v-on指令来完成的 v-on:事件名 如  v-on:click
		2.在v-on:事件名的赋值语句中是当前事件触发调用的函数名
		3.在vue中事件的函数统一定义在Vue实例的methods属性中
		4.在vue定义的事件中this指的就是当前的Vue实例,日后可以在事件中通过使用this获取Vue实例中相关数据 调用methods中相关方法

4.2 Vue中事件的简化语法

		<div id="app">
        <h2>{
   
   { age }}</h2>
        <input type="button" value="通过v-on事件修改年龄每次+1" v-on:click="changeage">
        <input type="button" value="通过@绑定时间修改年龄每次-1" @click="editage">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
           el:"#app",  //element: 用来指定vue作用范围
           data:{
      
      
               age:23,
           },    //data   : 用来定义vue实例中相关数据
           methods:{
      
      
               changeage:function(){
      
      
                   this.age++;
               },
               editage:function(){
      
      
                   this.age--;
               }

           }  //methods: 用来定义事件的处理函数
        });
    </script>

# 总结:
			1.日后在vue中绑定事件时可以通过@符号形式 简化  v-on 的事件绑定

4.3 Vue事件函数两种写法

		<div id="app">
        <span>{
   
   {count}}</span>
        <input type="button" value="改变count的值" @click="changecount">
    </div>
    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
           el:"#app",
           data:{
      
      
               count:1,
           },
           methods:{
      
      
               /*changecount:function(){
                   this.count++;
               }*/
               changecount(){
      
      
                   this.count++;
               }
           }
        });
    </script>

# 总结:
			1.在Vue中事件定义存在两种写法  
				 一种是 函数名:function(){}       
			     一种是  函数名(){} 推荐

4.4 Vue事件参数传递

		<div id="app">
        <span>{
   
   {count}}</span>
        <input type="button" value="改变count为指定的值" @click="changecount(23,'xiaohei')">
    </div>

    <!--引入vue.js-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
        const app = new Vue({
      
      
           el:"#app",
           data:{
      
      
               count:1,
           },
           methods:{
      
      
               //定义changecount
               changecount(count,name){
      
      
                   this.count = count;
                   alert(name);
               }

           }
        });
    </script>

# 总结:
	1.在使用事件时,可以直接在事件调用处给事件进行参数传递,在事件定义处通过定义对应变量接收传递的参数

---

5.v-show v-if v-bind

5.1 v-show

v-show:用来控制页面中某个标签元素是否展示

<div id="app">
    <!--
        v-show: 用来控制标签展示还是隐藏的
    -->
    <h2 v-show="false">百知教育欢迎你的加入!</h2>
    <h2 v-show="show">百知教育欢迎你的加入这是vue中定义变量true!</h2>
    <input type="button" value="展示隐藏标签" @click="showmsg">

</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
      
      
        el:"#app",
        data:{
      
      
            show:false,
        },
        methods:{
      
      
            //定义时间
            showmsg(){
      
      
               this.show =  !this.show;
            }
        }
    })
</script>

# 总结
			1.在使用v-show时可以直接书写boolean值控制元素展示,也可以通过变量控制标签展示和隐藏
			2.在v-show中可以通过boolean表达式控制标签的展示和隐藏

5.2 v-if

v-if: 用来控制页面元素是否展示

<div id="app">
    <h2 v-if="false">百知教育</h2>
    <h2 v-if="show">百知教育欢迎你的加入</h2>
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
      
      
        el:"#app",
        data:{
      
      
            show:false
        },
        methods:{
      
      

        }
    });
</script>

5.3 v-bind

v-bind: 用来绑定标签的属性从而通过vue动态修改标签的属性

<div id="app">
    <img width="300" v-bind:title="msg" v-bind:class="{aa:showCss}"  src="baizhilogo.jpg" alt="">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
      
      
        el:"#app",
        data:{
      
      
            msg:"百知教育官方logo!!!!",
            showCss:true,
        },
        methods:{
      
      
        }
    })
</script>

5.4 v-bind 简化写法

​ vue为了方便我们日后绑定标签的属性提供了对属性绑定的简化写法如 v-bind:属性名 简化之后 :属性名

<div id="app">
    <img width="300" :title="msg" :class="{aa:showCss}"  :src="src" alt="">
    <input type="button" value="动态控制加入样式" @click="addCss">
    <input type="button" value="改变图片" @click="changeSrc">
</div>
<!--引入vue.js-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>

    const app = new Vue({
      
      
        el:"#app",
        data:{
      
      
            msg:"百知教育官方logo!!!!",
            showCss:true,
            src:"https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1583490365568&di=52a82bd614cd4030f97ada9441bb2d0e&imgtype=0&src=http%3A%2F%2Fimg.kanzhun.com%2Fimages%2Flogo%2F20160714%2F820a68f65b4e4a3634085055779c000c.jpg"
        },
        methods:{
      
      
            addCss(){
      
      
                this.showCss= !this.showCss;
            },
            changeSrc(){
      
      
                this.src = "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1925088662,1336364220&fm=26&gp=0.jpg";
            }
        }
    })
</script>

---

6.v-for的使用

v-for: 作用就是用来对对象进行遍历的(数组也是对象的一种)

<div id="app">

    <span>{
   
   { user.name }} {
   
   { user.age }}</span>
    <br>
    <!--
       通过v-for遍历对象
    -->
    <span v-for="(value,key,index) in user">
        {
   
   {index}} : {
   
   {key}} : {
   
   {value}}
    </span>

    <!--
        通过v-for遍历数组
    -->
    <ul>
        <li v-for="a,index in arr" >
            {
   
   {index}} {
   
   {a}}
        </li>
    </ul>

    <!--
        通过v-for遍历数组中对象
        :key 便于vue内部做重用和排序
    -->
    <ul>
        <li v-for="user,index in users" :key="user.id">
            {
   
   {index+1}} {
   
   { user.name }}  === {
   
   { user.age }} ==== {
   
   { user.content }}
        </li>
    </ul>

</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
      
      
        el: "#app",
        data: {
      
      
            user:{
      
      name:"小陈",age:23},
            arr:["北京校区", "天津校区", "河南校区"],
            users:[
                {
      
      id:"1",name:"xiaochen",age:23,content:"我曾经也是一个单纯的少年!"},
                {
      
      id:"2",name:"小白",age:23,content:"我曾经是一个邪恶的少年!"},
            ]
        },
        methods: {
      
      }
    });
</script>

# 总结
	1.在使用v-for的时候一定要注意加入:key 用来给vue内部提供重用和排序的唯一key 

---

7 .v-model 双向绑定

v-model: 作用用来绑定标签元素的值与vue实例对象中data数据保持一致,从而实现双向的数据绑定机制

<div id="app">
    <input type="text" v-model="message">
    <span>{
   
   {message}}</span>
    <hr>
    <input type="button" value="改变Data中值" @click="changeValue">
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    const app = new Vue({
      
      
        el: "#app",
        data: {
      
      
            message:""
        },
        methods: {
      
      
            changeValue(){
      
      
                this.message='百知教育!';
            }
        }
    });
</script>

# 总结
		1.使用v-model指令可以实现数据的双向绑定 
		2.所谓双向绑定 表单中数据变化导致vue实例data数据变化   vue实例中data数据的变化导致表单中数据变化 称之为双向绑定

# MVVM架构  双向绑定机制
	Model: 数据  Vue实例中绑定数据
	
	VM:   ViewModel  监听器

	View:  页面  页面展示的数据

---

8. 事件修饰符

修饰符: 作用用来和事件连用,用来决定事件触发条件或者是阻止事件的触发机制

# 1.常用的事件修饰符
	.stop    停止
	.prevent 阻止
	.self    独自
	.once    一次

8.1 stop事件修饰符

用来阻止事件冒泡

<div id="app">
    <div class="aa" @click="divClick">
        <!--用来阻止事件冒泡-->
        <input type="button" value="按钮" @click.stop="btnClick">
    </div>
</div>
<!--引入vue-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
  const app = new Vue({
      
      
    el: "#app",
    data: {
      
      },
    methods: {
      
      
      btnClick(){
      
      
        alert('button被点击了');
      },
      divClick(){
      
      
        alert('div被点击了');
      }
    }
  });
</script>

8.2 prevent 事件修饰符

用来阻止标签的默认行为

<!--用来阻止事件的默认行为-->
<a href="http://www.baizhibest.com/" @click.prevent="aClick">百知教育</a>

8.3 self 事件修饰符

用来针对于当前标签的事件触发 ===========> 只触发自己标签的上特定动作的事件 只关心自己标签上触发的事件 不监听事件冒泡

<!--只触发标签自身的事件-->
<div class="aa" @click.self="divClick">
  <!--用来阻止事件冒泡-->
  <input type="button" value="按钮"  @click.stop="btnClick">
  <input type="button" value="按钮1" @click="btnClick1">
</div>

8.4 once 事件修饰符

once 一次作用: 就是让指定事件只触发一次

    <!--
    .prevent : 用来阻止事件的默认行为
    .once    : 用来只执行一次特定的事件
    -->
    <a href="http://www.baizhibest.com/" @click.prevent.once="aClick">百知教育</a>

---

9. 按键修饰符

作用: 用来与键盘中按键事件绑定在一起,用来修饰特定的按键事件的修饰符

# 按键修饰符
	.enter
	.tab
	.delete (捕获“删除”和“退格”键)
	.esc
	.space
	.up
	.down
	.left
	.right

9.1 enter 回车键

用来在触发回车按键之后触发的事件

 <input type="text" v-model="msg" @keyup.enter="keyups">

9.2 tab 键

用来捕获到tab键执行到当前标签是才会触发

<input type="text" @keyup.tab="keytabs">

---

下一篇：Vue_02 axios篇