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 <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

 

posted @ 2018-01-25 16:31  一石数字欠我15w!!!  阅读(873)  评论(0编辑  收藏  举报