一天带你入门到放弃vue.js(一)

写在前面的话!

每个新的框架入手都会进行一些列的扯犊子!这里不多说那么多!简简单单说一下vue吧!

Vue.js是目前三大框架(angular,vue,react)之一,是渐进式js框架,据说是摒弃了了其他的两者框架的缺点继承了优点!容易上手,效率高,压缩版源码仅20k!中文文档比较完善(或许这个就是我要学这个原因吧),vue在中国市场比重还是比较大!废话不说开始进行走进Vue.js的学习之旅吧!接下来进行一天入门Vue.js到放弃系列!

初始Vue.js

中文文档:

首先进行下载Vue.js最新版本

为了在学习环境中我们选择开发版的源代码有助于我们学习,会在控制台发生错误报告错误!

这里提供一个cdn在线vuejs的地址,最好保存本地,由于接下来我们要进行折腾vue的一天开始了!

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

准备工作完成了,我们还是书写一个伟大的入门级的Vue.js(hello world程序)

新建一个html文件(index.html为例)

<div id="app">-->

    <p v-model="who">我们是谁? {{who}}</p>

    <p v-model="progress">我们在写什么程序? {{progress}}</p>

    <p v-model="lang">伟大的从入门到放弃系列 {{lang}} 开始了 </p>

</div>

js代码(main.js)

 let app = new Vue({

        el: "#app",

        data: {

            who: "程序员",

            progress: "Hello World",

            lang: "Vue.js",

        }

    });

html的页面中双花括号中的变量的调取来自js文件中的data,el:表示vue的容器,这个是表示在id为app的元素下完成页面渲染,当然可以进行设置一个全局变量,通过控制台修改data的数据,页面中的显示都会发生变化!

也可以是下面的给input绑定一个v-model,通过输入输入的内容动态可以改变显示内容

    <p>

        <input type="text" v-model="name">

        我的名字是 {{name}}

    </p>

    <p>

        <input type="text" v-model="age">

        我今年 {{age}} 岁

    </p>

系统学习vue语法

vue系统指令:

vue-for

上面一个案例简单的看出了vue和之前的不一样,从此可以说dom操作从此就是形同陌路,下面看一下vue实现for循环

index.html页面

<ul >

    <li v-for="good in goods"> 手机名称:{{good.name}},手机原价:&yen;{{good.price}},手机折扣价:&yen;{{(good.zhekou)?good.price*good.zhekou:good.price}} </li>

</ul>

main.js代码

var app = new Vue({

    el: "#app",

    data: {

        goods:[

            {

                id:5,

                name:"小米8",

                price:2999,

                zhekou:0.98

            },

            {

                id:23,

                name:"小米mix2S",

                price:3299,

                zhekou:0.9

            },

            {

                id:73,

                name:"iPhone X",

                price:7388

            },

            {

                id:52,

                name:"华为P20Pro",

                price:4998,

                zhekou:0.985

            }

        ]

    }

这里使用了for in的方式进行循环出data中的数据! v-if(good in goos),表名这个good就是来自data中的商品数组的item(子项),获取的时候只需要进行goos.对象名称就可以显示

v-bind

使用v-bind绑定超链接的href地址

inde.html

<a v-bind:href="url">{{title}}</a>

main.js中

app = new Vue({

    el: "#app",

    data:{

        title:"点我去百度",

        aaa:"btn btn-default",

        url:"http://baidu.com",

        isActive:true

    }

});

此时可以动态改变data的url点击超链接跳转不同的页面

我们还可以使用这个v-bind添加class值

index.html

//不管什么时候都添加class

<a href="" v-bind:class="{aaa}">000</a>

//动态的选择添加class,状态激活后添加btn这个class

<a href="#" :class="{ btn: isActive }">我有class属性</a>

在上述中你或许细心已经观察到了我使用了:class进行绑定,vue为了提供极大的便利, 这里是v-bind的替代写法用 : 效果一样!

v-on

index.html

//点击事件

<a href="#" v-on:click="isClick">点我</a>

//键盘事件

 <input type="text" @keyup="onKeyup" @keyup.enter="onKeyenter">

 //绑定多个事件

 <button v-on="{mouseenter:onEnter,mouseleave:onOut}">移动区域</button>

main.js

app = new Vue({

    el: "#app",

    methods:{

        isClick:function(){

            console.log("鼠标点击成功")

        },

        noClick:function(){

            console.log("这个按钮不能点大哥!")

        },

        onEnter:function(){

            console.log("鼠标移入")

        },

        onOut:function(){

            console.log("鼠标移出")

        },

        Onsubmit:function(e){

            e.preventDefault();

            console.log("submitted")

        },

        onKeyup:function(){

            console.log("你按下了键盘!!!")

        },

        onKeyenter:function(){

            console.log("你摁下的是enter键")

        }

    }

对于不同的绑定的事件,执行的函数可以卸载vue的methods对象中,当然这个v-on和v-bind也是几个常用属性,也是拥有快捷替代方式的可以使用@替代v-bind

v-model

在开始书写hello world程序你或许已经见过这个v-model这个指令,在这里我们详细说明一下他的使用范围已经修饰参数的区别

index.html

不同参数的区别

<div id="app">

    <p>时时更新数据</p>

    <input type="text" v-model="name">

    {{name}}

    <p>失去焦点(blur)时候改变dom数据</p>

    <input type="text" v-model.lazy="name">

    {{name}}

    <p>v-model.number返回的是数字number类型</p>

    <input type="text" v-model.number="uid">

    {{uid}}

    <p>v-model.trim去除输入的多余空格</p>

    <!--<input type="text" v-model="name">-->

    <input type="text" v-model.trim="name">

    <pre>{{name}}</pre>

</div>

v-model.lazy懒惰变更数据,不想之前时时改变,这个是只要在input数去焦点(blur)的时候改变

v-model.number输入框中的数据以数字形式进行,主要用于计算的时候,如果手动输入在input的这是会当做String(字符串处理)

v.model-trim:在空格存在的input中会剔除掉空格

vue-model使用范围:

上面的主要使用了input的type="text"的应用这里看一下,type是checkbox和radio的类型

index.html

<p>性别:</p>

<input type="radio" v-model="sex" value="boy">男

<br>

<input type="radio" v-model="sex" value="gril">女

<br>

{{sex}}

<label for="">爱好:</label>

<input type="checkbox" v-model="hobby" value="JAVA">JAVA

<input type="checkbox" v-model="hobby" value="PHP">PHP

<input type="checkbox" v-model="hobby" value="web前端">web前端

<input type="checkbox" v-model="hobby" value="C++">C++

<input type="checkbox" v-model="hobby" value="Node.js">Node.js

{{hobby}}

<br>

在radio中返现选择哪个会呈现哪个选项的value值,在多选框中会呈递所选的选项数组的value

多行文本和input的type="text"的实则一样,没什么变化

<textarea name=""  cols="30" rows="10" v-model="article">

</textarea>

{{article}}

绑定artice到data,手动改变后,下面呈递的article也随之改变

select的使用

<p>下拉选项表</p>

我的选择:

<select v-model="add">

    <option value="1">北京</option>

    <option value="2">丽江</option>

    <option value="3">上海</option>

    <option value="4">金三桥</option>

    <option value="5">钓鱼岛</option>

</select>

我想去的地方是:{{add}}

<p>我喜欢吃:</p>

<select name="" id="" v-model="food" multiple>

    <option value="1">胡辣汤</option>

    <option value="2">炸酱面</option>

    <option value="3">牛肉面</option>

    <option value="4">米饭</option>

    <option value="5">大盘鸡</option>

</select>

main.js

app=new Vue({

    el:"#app",

    data:{

            sex:"boy",

        hobby:["Node.js"],

        article:"        as带回家水电费和水电费水电费会计师的福克斯的发布水电费爱神的箭看哈水电费快捷方式大号爱上的语句告诉大家受到个是的尴尬收到就好\n",

        add:5,

        food:[1,3,5]

    }

})

在下拉选择框select中,在所选的select绑定数据,在data中指定value就可以表现代替选项的文本,在开发中一般是有id代替,而这个选项文本可能会随之改变,而id则是一劳永逸!