Vue.Js 快速入门

跟女神混没前途的!在怎么也不过是一曲觊觎天鹅的癞蛤蟆狂想曲啊!老话怎么说来着?十鸟在林不如一鸟在手呀!天上金凤凰不如枝头小乌鸦呀!

配置环境

首先下载vue.js,下载地址Vue.js下载,大概一万多行的js代码,就是Vue.js的全部内容了。

然后创建两个文件夹和一个html文件,目录结构如下:

lib\
    vue.js
js\
    html.js
index.html

其中lib目录下的vue.js文件就是下载的代码,js目录下的html.js就是自己写的就是js项目代码,index.html即首页文件。

声明渲染

vue.js的语法有点像Jinja2的语法,也是使用两个花括号包围变量。在index.html中声明对应的id是app,然后再html中定义id

html.js的代码如下:

var app = new Vue({
    el:'#app',
    data:{
        name:'admin',
        age:18,
        sex:'male',
    }

})

index.html的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>langzi</title>
</head>
<body >
666
<div id="app">
{{ name}}
</div>
<script src="lib/vue.js"></script>
//别忘了要先导入vue.js,不然会报错
<script src="js/html.js"></script>


</body>
</html>

这个时候页面就会返回666和admin的值,其中你主要编辑的内容是index.html与js目录下的html.js代码

指令合集

在Vue.js中,自带的基础用法叫指令,格式是v-xxx,作用效果总结如下:

v-model 指令

v-model 指令,它能轻松实现表单输入和应用状态之间的双向绑定。如果想要根据自己的输入显示出输入的内容,那么在html文件中就可以这么写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>langzi</title>
</head>
<body >
<div id="app">
<div>
    <input type="text" v-model="name">
    <span>当前输入用户名为:{{name}}</span>
</div>
<div>
    <input type="text" v-model="age">
    <span>当前输入年龄为:{{age}}</span>
</div>
<div>
<input type="text" v-model="sex">
<span>当前输入性别为:{{sex}}</span>
</div>
</div>
<script src="lib/vue.js"></script>
<script src="js/html.js"></script>

</body>
</html>

效果如下

VUE初次

<span v-show="name">当前输入用户名为:{{name}}</span>

v-show的作用即如果name的值为空的话,就不显示出来,只有当输入的值存在的话才会显示出来。

坚持原创技术分享,您的支持将鼓励我继续创作!
------ 本文结束 ------

版权声明

LangZi_Blog's by Jy Xie is licensed under a Creative Commons BY-NC-ND 4.0 International License
由浪子LangZi创作并维护的Langzi_Blog's博客采用创作共用保留署名-非商业-禁止演绎4.0国际许可证
本文首发于Langzi_Blog's 博客( http://langzi.fun ),版权所有,侵权必究。

0%