Vue 常用api

Vue 环境

1. 开发环境 :

<!-- 开发环境版本，包含了有帮助的命令行警告   相当于jquery中的开发版本  开发中 经常使用  因为出错有提示-->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

2. 生产环境

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

1. 声明与渲染

声明

	<div id="app">
	  {{ message }}
	</div>

渲染

	var app = new Vue({
	  el: '#app',
	  data: {
	    message: 'Hello Vue!'
	  }
	})

el : 用来标记使用vue来管理的dom对象 一般是选择器 但是 不能使用html和body 要是用普通的标签
el 里面可以是任意的选择器 除了body 和html 但是建议给id选择器 在el里面被命中的选择器 他的子代以及后代选择器 都会被vue管理
data : (就是在页面显示的数据) 通过某一种语法 和页面dom元素关联起来

2. v-text

v-text 给元素设置设置文本
语法 : 在标签里面 v-text=“data里面的数据”
特点 : 直接设置 会覆盖掉标签原本的文本
没办法解析标签
简写方式 {{}}
如果我们要保留标签里面原始的文本 name就必须使用简写方式
开发中 简写方式用的很多 v-text用得比较少

 <h1 v-text="message" ></h1>

覆盖 :

<h1 v-text="message" >我不爱睡觉</h1>

在前面添加 :

<h1>我不爱睡觉{{message}}</h1>

简写 :

<h1>{{str}}</h1>

3. v-html

v-html : 在标签内部 v-html= “data中的数据”
可以解析标签 也可以解析文本
标签内部如果说存在原始文本 name就会被覆盖
没有简写形式
相对于v-text 使用的频率不高

 const app = new Vue({
        el : "#app",
        data : {
            a : "<a>我是一个超链接</a>",
            info : "我是某某某"
        }
    })

4. v-on 给元素绑定事件

给元素绑定事件 v-on:click blur dblclick
简写形式 : @事件名=
注册的事件 后面的函数可以传参

普通的注册 :

  <input type="button" v-on:click="sayHi" value="sayHi">

简写形式 :

  <input type="button" @click="sayHi" value="sayHi">

可以传参

  <input type="button" @click="bigger(10)" value="count">

5. Vue中的 this 指向

在Vue中 this是指向于Vue实例化对象的

app 实例化之后 data和methods 里面的属性 会直接整合到Vue实例上 它的里面已经没有data和methods属性所以我们取值的时候 只需要使用this进行取值

const app  = new Vue({
            el : "#app",
            data : {
                summer : "夏天的风我永远记得"
            },

            methods : {
                tryThis() {
                    console.log(this);
                    console.log(this === app);
                    
                    
                }
            }

        })

true

   console.log(this === app);  

6. v-bind 动态加上属性

标准形式 :

   <div v-bind:class="isGreen?'green' : ''"></div>

简写 :

	<div :class="isGreen?'green' : "></div>

对象的写法

对象的写法 :class="{属性值 : 表达式}

 <div :class="{green : isGreen}"></div>

7. 双向绑定

v-model 双向数据绑定
当文本输入框的内容发生变化时 会同步修改绑定的数据
如果我们直接修改data里面的值 也会同步修改文本

 <div id="app">
    <h2>{{info}}</h2>
	<input type="text" v-model="info" @keyup.enter="getInfo">
 </div>



 const app = new Vue({
        el : "#app",
        data : {
            info : "天气不错"
        },
        methods : {

        getInfo() {
            this.info              
            }
        }
    })

注意点 :
1. 没有简写形式
2. 只有指定的表单元素可以使用(input select textarea)
3. 原理 : 检测用户输入 把输入的值获取到 然后同步更新给页面的元素
4. 修饰符 : .enter .13 .stop .prevent

8. v-for 遍历数组的数和下标

1. 点击时获取对应的值名称

 	<p v-for="item in songList" @click="sing(item)">{{item}}</p>

2. 遍历和获取对应的下标

 <p v-for="(item, index) in songList">{{item}}---{{index}}</p>