指令:v-xx组成的特殊指令,如果一个标签中有指令会默认替换原有的书
v-model:实现数据和视图的双向绑定
v-text:在元素中插入值
v-html:在元素中插入标签或者插入文本
v-if:根据表达式的真假值来动态的插入或者是移除元素
v-else:与if配套使用
v-show:根据表达式的真贱动态来显示或者隐藏
v-for:根据变量的值来循环渲染元素 v-for=“(item,index) in arr”
- for循环可以是数组,对象,数字,字符串等等。
v-on:监听元素事件,并执行响应的操作
- v-on:click=“func”=@click="func" this的操作
- 数组的操作:push,pop,shift,unshift,splice,reverse
v-bind:绑定元素的属性的执行响应的操作;
- v-bind:href=“URL”=:href="URL" 动态的东西使用v-bind绑定,
修饰符:以.开头的指令的特殊绑定方式吗,
.prevent
修饰符告诉 v-on
指令对于触发的事件调用 event.preventDefault()
在表单操作中经常用到v-on.submit.prevent
常用指令示范:
v-bind的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><style> .btn{ background-color: cadetblue; width: 100px; height: 100px; }style><body><div id="app"> <a v-bind:href="url">点我有惊喜a> <input type="button" v-bind:value="but"> <div v-bind:class="{btn:isactive}">div> 用对象的方式调用,key代表对象名字,value代表在什么时候调用--> <div v-bind:class="klass">div> 直接调用-->div><script> var obj = new Vue({ //赋予它一个obj来接收主要是为了在终端中操作的方便 el:"#app", data:{ url:"https://www.baidu.com", but:"点我啊啊啊啊", klass:"btn", isactive:true } })script>body>html>
v-for的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><body><div id="app"> --> {{food}}--> --> <ul> <li v-for="food in foods">{{food.name}}: ¥{{food.discount ? food.price*food.discount : food.price}} 如果有discount的话就执行?后边的,如果没有就执行:后边--> li> ul>div><script> new Vue({ el:"#app", data:{// foodlist:[// "葱","姜","蒜"// ], foods:[ {"name":"葱","price":10,"discount":0.8}, {"name":"姜","price":8,"discount":0.6}, {"name":"蒜","price":6}, ] } })script>body>html>
v-model的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><body><div id="app"> <div> <input type="text" v-model="msg"> 实时更新--> {{msg}} div> <div> <input type="text" v-model.lazy="msg_s"> 失去焦点显示--> {{msg_s}} div> <div> <input type="text" v-model.trim="msg_t"> 去掉空格--> {{msg_t}} <pre>{{msg_t}}pre> pre 标签显示原生的数据--> div> <br> <hr> <label>男 <input v-model="sex" value="male" type="checkbox"> label> <label>女 <input v-model="sex" value="female" type="checkbox"> label> {{sex}} <br> <label> 男男 <input v-model="xb" type="radio" value="男"> label> <label> 女女 <input v-model="xb" type="radio"value="女"> label> <hr> {{xb}} <hr> <textarea v-model="text">textarea> <hr> <div>where are you from?div> <select v-model="sel"> <option value="1">红灯区option> <option value="2">绿灯区option> <option value="3">黄灯区option> select>{{sel}} <div>where are you from?div> <select v-model="sels" multiple> <option value="1">红灯区option> <option value="2">绿灯区option> <option value="3">黄灯区option> select>{{sels}}div><script> new Vue({ el:"#app", data:{ msg:"", msg_s:"", msg_t:"", zhang:"我是你爸", sex:["male"], text:"草拟大爷", sel:null, hobby:null, xb:"", sels:[] } })script>body>html>
v-on的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><body><div id="app"> v-on:指令可以直接使用@符号代替--> <button v-on="{mouseenter:onEnter,mouseleave:outEnter}" v-on:click="OnClick">点我啊button> <form v-on:submit="onSubmit($event)" v-on:keyup.enter="onEnter"> <input type="text"> <button type="submit">提交啊button> form> <form v-on:keyup="onUp"> <input type="text"> form>div><script> new Vue({ el:"#app", methods:{ OnClick:function () { console.log("大爷,哪里不能点啊") }, onEnter:function () { console.log("进来了···") }, outEnter:function () { console.log("出去了·····") }, onSubmit:function (e) { e.preventDefault() console.log("提价你大爷") }, onEnter:function () { console.log("回车键在敲我") }, onUp:function () { console.log("键盘在敲") } } })script>body>html>
v-show,v-model的使用<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><body><div id="app"> <div> <input type="text" v-model="name" placeholder="请输入名字"> <span v-show="name">我的名字是:{{name}}span> div> <div> <input type="text" v-model="age" placeholder="请输入年龄"> <span v-show="age">我的年龄是:{{age}}span> div> <div> <input type="text" v-model="sex" placeholder="请输入性别"> <span v-show="sex">我的性别是:{{sex}}span> div>div><script> new Vue({ el:"#app", data:{ name:"", age:"", sex:"", } })script>body>html>
v-text: 插入一段文本<div id="app"> <p v-text="message">p>div><script> var vm = new Vue({ el:'#app', data:{ message:'hello world !' } })script>
v-html: 既可以插入一段文本也可以插入html标签<div id="app"> <p v-html="message">p>div><script> var vm = new Vue({ el:'#app', data:{ message:"" } })script>
基本指令就这么点,还有一部分自定义的指令
//自定义指令<div v-pin="true">div>Vue.directive('pin',function(el,binding){ //var $el=$(el); var pinned=binding.value; if(pinned){ el.style.position='fixed'; }else{ el.style.position='static'; } })
<div id="app"> <ul> <li v-on:click="login(true)">二维码登录li> <li v-on:click="login(false)">验证码登录li> ul> <div v-show="temp"> <h1>这里是二维码登录h1> div> <div v-show="!temp"> <h1>这里是验证码登录h1> div>div><script> var obj = new Vue({ el:"#app", data:{ temp:true }, methods:{ login:function (temp) { this.temp=temp } } })script>
tag切换实现
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Titletitle> <script src="vue.js">script>head><style> ul>li{ list-style: none; display: inline-block; width: 100px; height: 40px; padding-right: 30px; border: 1px purple solid; } #app{ text-align: center; margin-top: 100px; }style><body><div id="app"> <ul> <li v-on:click="home(home)">我的首页li> <li v-on:click="course(course)">我的课程li> <li v-on:click="detail(detail)">课程详细li> <li v-on:click="callme(callme)">联系我们li> ul> <hr> <ul> <li v-if="temp == home">我的首页li> <li v-else-if="temp == course">我的课程li> <li v-else-if="temp == detail">课程详细li> <li v-else="temp == callme">联系我们li> ul>div><script> var obj = new Vue({ el:"#app", data:{ temp:'home' }, methods:{ home:function (home) { console.log("我的主页") this.temp = home }, course:function (course) { console.log("我的课程") this.temp = course }, detail:function (detail) { console.log("课程详细") this.temp = detail }, callme:function (callme) { console.log("联系我们") this.temp = callme } }, })script>body>html>
tag切换升级版
搭建vue.js项目:
脚手架搭建框架 官网下载node.js,傻瓜式安装
Windows搭建vue项目:
安装note.js
npm init 初始化操作
npm install vue-cli -g g是全局变量
vue-init webpack myvue myvue是项目名
cd myvue 切换到项目目录
npm install
npm run dev 启动姓名
第一步下载安装node.js;
? Project name myvue --项目名 ? Project description A Vue.js project ? Author 522338473 <522338473@qq.com> --作者,默认git账户名? Vue build standalone --vue构建 ? Install vue-router? Yes --安装vue路由 ? Use ESLint to lint your code? Yes --使用eslint链接代码 ? Pick an ESLint preset Standard ? Set up unit tests Yes --设置单元测试 ? Pick a test runner jest --选择一个测试运行 ? Setup e2e tests with Nightwatch? Yes --用nightwatch设置e2e测试 ? Should we run `npm install` for you after the project has been created? (recommended) npm vue-cli · Generated "myvue".
不过中途有可能会因为是国外服务器的缘故有些包安装错误,错误的时候继续执行npm install
好了之后执行上边黄色指令运行项目
虽然完成了,但是速度太慢了,建议使用淘宝镜像安装,快!
首先我们需要下载npm,因为我已经提前安装了node.js,安装包里面集成了npm,然后我们就可以利用npm命令从获取淘宝镜像的cnpm了。 1.打开命令行窗口,输入 npm install -g cnpm --registry=https://registry.npm.taobao.org 获取到cnpm以后,我们需要升级一下,输入下面的命令 cnpm install cnpm -g 因为安装Vue需要npm的版本大于3.0.0,所以我们要升级一下, 然后我们输入下面的命令,安装vue cnpm install vue 接下来安装vue-cli cnpm install --global vue-cli 此时环境就搭建好了。 2.接下来我们需要指定一个目录存放我们的项目,可以选择任意路径,确定好路径后输入下面的命令 vue init webpack "项目名称" 3.成功以后,我们进入项目所在目录 cd "项目所在文件夹" 然后依次输入下面的命令 cnpm install cnpm run dev