五十初识vue，实例成员语法，指令，
Posted wukai66
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了五十初识vue，实例成员语法，指令，相关的知识，希望对你有一定的参考价值。
vue
1.什么是vue？
可以独立完成前后端分离式web项目的javascript框架
2.为什么要学习vue？
三大主流框架：Angular（脸书）、React（git公司）、vue（中国人第三方）
先进的前端设计模式：MVVM
可以完全脱离服务器，以前端代码复用渲染整个页面：组件化开发
vue框架
vue是前端框架：Angular（脸书）、React（git公司）、vue（中国人第三方）
vue：结合其他框架优点，轻量级，中文API，数据驱动，双向绑定，MVVM设计
模式、组件化开发、单页面应用
vue环境：本地导入与cdn导入（都在代码最下面）
<!--<script src="js/vue.js"> 本地导入--> <script src="https://cn.vuejs.org/js/vue.min.js"> cdn导入
vue是js渐进式框架
根据开发需求，可以决定vue框架控制项目具体位置，可以为一个标签，也可以为一个页面，甚至整个项目
实例成员-挂载点 el：
vue如何与html页面结构建立关联：挂载点
1.挂载点通常只能找到一个，所以一般会设置id
2.一个vue对象挂载点只能匹配到一个结果，一般会把挂载点用id标识
3.html与body不能作为挂载点
<script> // 这里是字典对象 vue就是实例 new Vue({ el:‘.main‘, // el就是实例成员 }) // 总结：1.html与body不能作为挂载点 // 2.一个vue对象挂载点只能匹配一个结果，所以挂载点一般使用id‘标识 </script>
实例成员-数据 {{ }}：
// 1.用实例成员data为vue环境提供数据，数据采用字典{}形式
// 2.在插值表达式，直接书写数据的key来访问数据
// 3.在外部通过接受实例的变量app,访问实例成员（实例成员都用$开头），间接访问数据 app.$data.info
// 4.在外部也可以通过实例变量app直接访问数据(优化过) app.info
<div id="app"> <!--只要在vue控制的标签中，{{ }}是插值表达式，中间出现的info是vue变量--> {{info}} </div>
// 1.用实例成员data为vue环境提供数据，数据采用字典{}形式
// 2.在插值表达式，直接书写数据的key来访问数据
// 3.在外部通过接受实例的变量app,访问实例成员（实例成员都用$开头），间接访问数据 app.$data.info
// 4.在外部也可以通过实例变量app直接访问数据(优化过) app.info
let app = new Vue({ el:‘#app‘, data:{ info:‘message‘, num:100, result:true, arr:[1,2,3,4,5], dic:{ name:‘kevin‘, age:18 } } }) </script> <script> console.log(app); console.log(app.$data.num); console.log(app.num) </script>
过滤器（filters）：
语法：{{ num|f}},data里面加上filters书写过滤函数，然后标签渲染
<!-- 插值表达式可以直接做简单运算 --> {{ num+1}}
没有参数过滤器：<p>{{ num | f1}}</p>
有参数过滤器一：<p>{{ 10,20,30,45 | f2}}</p>
有参数过滤器二：<p>{{ 10,20 | f2(30,45)}}</p>
filters:{
f1:function (num) {
return num*2
},
// 总结：{{ a,b,c,d | f1 }} {{ a,b | f1(c,d) }}
f2:function (a,b,c,d) {
return a+b+c+d
}
文本指令 v-text：
语法：v-指令名=变量 <p v-text="info"></p> v-指令名="常量"，常量采用常量基本语法，数字与布尔类型等可以直接书写，字符串等需要加符号‘‘ <p v-text="‘info‘"></p> <p v-text="123"></p> v-html可以解析html标签语法 <p v-html="‘<b>好的</b>‘"></p> <p v-text="‘<b>好的</b>‘"></p>
js多行字符串``
let s1 = `第一行
第二行
第三行`;
console.log(s1);
let name =‘kevin‘;
let age =18;
let s2 =`
name:${name}
age:${age}
`;
console.log(s2)
事件指令 v-on：
语法一：事件指令：v-on:事件名="事件函数名"
<p class="low_num" v-on:click="lowNum"> <span>点击一下减一:</span> <span> {{num}}</span> </p> 双击事件：<p v-on:dblclick="dbAction">双击</p>
语法二：事件名="事件函数" 可以简写成 @事件名="事件函数"
<p @mouseover="overAction()">悬浮</p> <p @mouseover="overAction(10,20)">悬浮1</p> <p @mouseover="overAction(10,20,$event)">悬浮2</p>
事件传参：
@事件=‘函数方法‘ 默认传入事件对象 $event
@事件="方法（）"，不传入任何参数，
@事件="方法（参数...）‘只传递自定义参数
@事件="方法"($event,参数.......)，自定义传入事件对象
<script> new Vue({ el:‘#app‘, data:{ num:99, }, methods:{ lowNum:function () { // 在vue实例内部的方法中，使用变量 this.num-=1; // alert(this.num) }, dbAction:function (ev) { // this.num-=1; console.log(ev) }, overAction:function (a,b,c) { console.log(a,b,c) } } }) </script>
属性指令：
1.属性选择器 语法： v-bind:属性名="变量值"
<p id="d1" class="p1" style="" title="" index="">属性指令1</p>
<p id="d2" v-bind:class="p1" style="" title="" index="">属性指令2</p>
<p v-bind:index="p1">自定义属性也可以被vue绑定1</p>
2. v-bind:属性名="变量值" 可以简写 ：属性名 ="变量"
<p :index="p1">自定义属性也可以被vue绑定2</p>
<p :title="‘文本提示‘">悬浮文本提示</p>
3.style样式属性绑定
<p :style="myStyle">样式绑定1</p>
<p :style="{backgroundColor:c1,color:c2,‘border-radius‘:‘50%‘}">样式绑定2</p>
4.class类属性绑定
<p :class="myc1">样式绑定3</p>
<p :class="[myc2,myc3,myc4,‘bbb‘]">样式绑定4</p>
<p :class="{ccc:ddd}">样式绑定5</p> # ccc是类名
<style> [index]{ color: orange; } .xxx{ background-color: yellowgreen; color: greenyellow; border-radius: 50%; } .xxx1{ background-color: yellowgreen; } .xxx2{ color: greenyellow; } .xxx3{ border-radius: 50%; } .ttt{ background-color:gold ; color: yellowgreen; } </style> <script> new Vue({ el:‘#app‘, data:{ p1:‘q1‘, myStyle:{ backgroundColor:‘red‘, // 背景颜色 color:‘green‘, // 字体颜色 ‘border-radius‘:‘50%‘, // 画圆 }, c1:‘cyan‘, c2:‘tan‘, myc1:‘xxx‘, myc2:‘xxx1‘, myc3:‘xxx2‘, myc4:‘xxx3‘, ddd:‘true‘, }, methods:{ // clickAction () { // this.ddd= !this.ddd // } // 点击事件函数二： clickAction:function () { this.ddd= !this.ddd } } }) </script> <!--案例：点击切换类名是否起作用 --> <p @click="clickAction" :class="{ttt:ddd}">点击切换类</p> .ttt{ background-color:gold ; color: yellowgreen; } data:{ ddd:‘true‘, }, methods:{ // clickAction () { // this.ddd= !this.ddd // } // 点击事件函数二： clickAction:function () { this.ddd= !this.ddd } }
表单指令：
<div id="app"> <form action=""> <!-- 1.对表单标签value 进行绑定操作 变量 ，不能实时监测 --> <input type="text" class="inp1" :value="info"> <input type="text" class="inp2" :value="info"> <p class="p1">{{info}}</p> <style> .p1{ width: 500px; height: 21px; background-color: skyblue; } </style>
<hr>
<!--2.表单标签的值由 v-model="变量" 来绑定 操作还是value，但是有实时监测功能 -->
<input type="text" class="inp1" v-model="info"> <input type="text" class="inp2" v-model="info"> <p class="p1">{{info}}</p> <hr>
<!-- 3.v-model操作单独复选框 - 确认框 -->
是否同意：<input type="checkbox" name="agree" true-value="yes" false-value="no" v-model="isAgree"> <p>{{isAgree}}</p> <hr> <input type="submit"> <hr>
<!-- 4.单选框 -->
性取向： 男 <input type="radio" name="sex" value="male" v-model="mysex"> 女 <input type="radio" name="sex" value="female" v-model="mysex"> 其他 <input type="radio" name="sex" value="others" v-model="mysex"> <p>{{mysex}}</p>
<!-- 5.复选框 -->
爱好： 男 <input type="checkbox" name="hobby" value="male" v-model="myhobbys"> 女 <input type="checkbox" name="hobby" value="female" v-model="myhobbys"> 其他 <input type="checkbox" name="hobby" value="others" v-model="myhobbys"> <p>{{myhobbys}}</p> <input type="submit"> </form> <script> new Vue({ el:‘#app‘, data:{ info:‘123‘, isAgree: ‘yes‘, mysex:‘‘, myhobbys:[], } }) </script>
以上是关于五十初识vue，实例成员语法，指令，的主要内容，如果未能解决你的问题，请参考以下文章