一天带你入门到放弃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则是一劳永逸!

v-model小结:使用范围input,textarea和select

转自 十月梦想博客 。 原文地址《一天带你入门到放弃vue.js(一)

相关文章:

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

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏九彩拼盘的叨叨叨

Web 前端菜鸟源码阅读列表

阅读优秀源码的好处有好多,如能学习一些技术知识,编码技巧,组织代码的方式,提高理解能力等等。

10010
来自专栏iOS开发笔记

iOS开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 ...

47070
来自专栏编程直播室

TypeScript 看见未来的 JavaScript

18030
来自专栏顶级程序员

写一个网页进度 loading

来自:简书 作者:jack_lo 原文:www.jianshu.com/p/4c93f5bd9861 loading随处可见,比如一个app经常会有下拉...

67790
来自专栏lgp20151222

Java引用外部字体(路径引用)的一些坑

然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面.

27510
来自专栏前端架构与工程

《微信小程序七日谈》- 第三天:玩转Page组件的生命周期

《微信小程序七日谈》系列文章: 本系列的文章并非初学教程,而是笔者在具体开发过程中遇到的问题以及部分解决方案。 前两篇文章第一天:人生若只如初见和第二天:你可...

254100
来自专栏企鹅号快讯

前端工程师面试题汇总

作者:@markyun markyun.github.io/2015/Front-end-Developer-Questions/ HTML Doctype作用...

32580
来自专栏牛客网

百度前端实习岗

13800
来自专栏Nian糕的私人厨房

CSS 字体图标引用

在自己的项目中,我们或多或少的需要插入一些 icon,缺少 UI 设计天赋的我只能去搜寻现有的 icon 了,在这里推荐大家去 Iconfont 阿里巴巴矢量图...

14430
来自专栏申龙斌的程序人生

零基础学编程030:像黑客般玩玩字符艺术

经常安装盗版软件的朋友可能会看到一些由字母组成的奇怪图案,比如下面这张图: ? (图片来自于网络) 在Python里,我们无法用字母拼出如此复杂的图案,但也可以...

42460

扫码关注云+社区

领取腾讯云代金券