vue入门-常用指令操作
指令：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>Title</title>
<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>Title</title>
<script src="vue.js"></script>
</head>
<body>
<div id="app">
<!--<ul>-->
<!--<li v-for="food in foodlist">{{food}}</li>-->
<!--</ul>-->
<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>Title</title>
<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>Title</title>
<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>Title</title>
<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:"<input type='button'>"
}
})
</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>Title</title>
<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 <@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
vue入门-常用指令操作的更多相关文章
- Vue入门---常用指令详解
Vue入门 Vue是一个MVVM(Model / View / ViewModel)的前端框架,相对于Angular来说简单.易学上手快,近两年也也别流行,发展速度较快,已经超越Angular了.比较 ...
- 02: vue.js常用指令
目录:Vue其他篇 01: vue.js安装 02: vue.js常用指令 目录: 1.1 vuejs简介 1.2 选择器:根据id.class等查找 1.3 静态绑定数据 data 1.4 插值 { ...
- Vue - vue.js 常用指令
Vue - vue.js 常用指令 目录: 一. vuejs模板语法之常用指令 1. 常用指令: v-html 2. 常用指令: v-text 3. 常用指令: v-for 4. 常用指令: v-if ...
- 新人成长之入门Vue.js常用指令介绍（一）
写在前面 作为一个刚步入职场工作的新人,对于公司中所用的技术和框架基本上不懂,只能从最基础的开始做起,进入公司接触的第一个框架就是前端框架Vue.js,几个功能做下来,觉得Vue.js首先学习起来真的 ...
- vue.js常用指令
本文摘自:http://www.cnblogs.com/rik28/p/6024425.html Vue.js的常用指令 上面用到的v-model是Vue.js常用的一个指令,那么指令是什么呢? Vu ...
- 【Vue】vue.js常用指令
http://www.cnblogs.com/rik28/p/6024425.html Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会 ...
- Vue的常用指令v-if， v-for， v-show，v-else， v-bind， v-on
Vue.js的指令是以v-开头的,它们作用于HTML元素,指令提供了一些特殊的特性,将指令绑定在元素上时,指令会为绑定的目标元素添加一些特殊的行为,我们可以将指令看作特殊的HTML特性(attribu ...
- vue之常用指令
事件缩写 v-on:click= 简写方式 @click= 事件对象$event <!DOCTYPE html> <html lang="en"> < ...
- vue的常用指令
https://www.bootcdn.cn/ 前端资源库 <!-- 常用内置指令 v:text : 更新元素的 textContent v-html : 更新元素的 innerHTML v-i ...
随机推荐
- 设计模式（一）单例模式：3-静态内部类模式（Holder）
思想: 相比于懒汉以及饿汉模式,静态内部类模式(一般也被称为 Holder)是许多人推荐的一种单例的实现方式,因为相比懒汉模式,它用更少的代码量达到了延迟加载的目的. 顾名思义,这种模式使用了一个私有 ...
- POJ-1190 生日蛋糕 NOI99
深搜+几个剪枝. 貌似搜索顺序也挺重要的...我不知是不是因为这个然后Tle了好久... #include <cstdio> #include <iostream> #incl ...
- 以Java 8 为基准
1.以Java 8 为基准 Spring Boot 2.0 要求Java 版本必须8以上, Java 6 和 7 不再支持. 2.内嵌容器包结构调整 为了支持reactive使用场景,内嵌的容器包结构 ...
- bzoj 4555 NTT优化子集斯特林
题目大意 读入n 求\(f(n)=\sum_{i=0}^n\sum_{j=0}^i\left\{\begin{matrix}i \\ j\end{matrix}\right\}*2^j*j!\) 分析 ...
- Best Coder Lotus and Characters
Lotus and Characters 问题描述 Lotus有nn种字母,给出每种字母的价值以及每种字母的个数限制,她想构造一个任意长度的串. 定义串的价值为:第1位字母的价值*1+第2位字母的 ...
- 【CF676D】Theseus and labyrinth（BFS，最短路）
题意:给定一张N*M的地图,每一格都是一个房间,房间之间有门.每个房间可能有四个门,例如>代表右边只有一个门在右边即只能向右走,L代表左边没有门只能除了左其他都可以走等等.现在给出起点和终点,每 ...
- 【Eclpise】Eclipse中Tomcat启动失败或者是重启失败
经常在Eclipse中遇到这样的问题,tomcat重启之后失败,而且也停止不了.最好的解决办法就是用DOS命令杀死进程. 比如下面这种情况: 1.查看进程ID 用windows的netstat查看信 ...
- hdu 1575(矩阵快速幂)
Tr A Time Limit: 1000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submis ...
- LeetCode OJ--Gray Code **
http://oj.leetcode.com/problems/gray-code/ 求格雷码的表示,主要应用递归. 递归生成码表 这种方法基于格雷码是反射码的事实,利用递归的如下规则来构造: 1位格 ...
- jenkins按角色授权
当一个公司的开发分为多个组或者是多个项目时,不能让所有的开发都公用一个构建,否则将会变得很混乱,为了解决这一问题,jenkins提供了角色授权的机制.每个开发有着对应的账号和权限,可以自行新建.构建. ...