java学习-veu

一，安装node-v12.14.1-x64.msi以及VSCodeUserSetup-x64-1.41.1.exe会自动进行环境配置

安装完成标志

写一个简单的小例子：1.使用软件打开路径C:\java\code\Vue\vuecode自己设置的路径目录。
2.创建一个空的目录
3.
在目录中创建文件。
4.
在终端中打开目录。
5.

npm install vue

导入所需要的依赖文件，如果是打开别人的项目直接使用npm install可以导入别人的所有依赖。

6.可以新建一个lib目录将要用的js文件复制进去方便之后的调用。

7.新建一个html文件输入html可导入头部代码
代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!--视图层--><div id="app">{{msg}}</div></body>
<!--导入文件-->
<script src="./lib/vue.js"></script><script>new Vue({el:'#app',//绑定视图层data:{msg:'nihao'}})
</script>
</html>

8.发布使用

二，双向绑定及事件
绑定视图层与控制层，在视图层修改的数据控制层也会更改v-model

<input type="text" v-model:value="searchMap.keyword">

双向绑定

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!--视图层--><div id="app">{{msg}}<input type="text" v-bind:value="searchMap.keyword"><input type="text" v-model:value="searchMap.keyword"><button v-on:click="dianji()">点击后台输出</button></div></body>
<!--导入文件-->
<script src="./lib/vue.js"></script><script>new Vue({el:'#app',//绑定视图层data:{msg:'nihao',searchMap:{keyword:'guo'} },methods:{dianji(){console.log("点击了")}}})
</script>
</html>

事件：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body>
<!--视图层--><div id="app">{{msg}}<input type="text" v-bind:value="searchMap.keyword"><input type="text" v-model:value="searchMap.keyword"><button v-on:click="dianji()">点击后台输出</button><button v-on:click="search()">查询</button><p>你要查询的是：{{result.title}}</p><p><a :href="result.site" target="_blank">{{result.title}}</a></p></div></body>
<!--导入文件-->
<script src="./lib/vue.js"></script><script>new Vue({el:'#app',//绑定视图层data:{msg:'nihao',searchMap:{keyword:'guo'},result:{}//所有的数据都在这里},methods:{dianji(){console.log("点击了")},search(){this.result={"title":"百度","site":"http://www.baidu.com"}}}})
</script>
</html>

三，路由
1.首先导入 vue和vue-router依赖
2.

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div id="app"><h1>Hello,App!</h1><p><router-link to="/">首页</router-link><router-link to="/student">学员管理</router-link><router-link to="/teacher">讲师管理</router-link><router-link to="/all">全部</router-link></p><!-- 显示view --><router-view></router-view></div><script src="./lib/vue.js"></script><script src="./lib/vue-router.js"></script><script>//1、定义路由的组件const welcome = { template: '<div>欢迎</div>' }const student = { template: '<div>Student List</div>' }const teacher = { template: '<div>Teachet List</div>' }const all={ template:'<div>all List</div>'}//2、定义路由const routes = [{ path: '/', redirect: '/welcome' },{ path: '/welcome', component: welcome },{ path: '/student', component: student },{ path: '/teacher', component: teacher },{path:"/all",component:all}]// 3、创建 router实例const router = new VueRouter({routes: routes //})// 挂载路由new Vue({el: '#app',router})</script></body></html>

java学习-veu相关推荐

Java学习路线图，如何学习Java事半功倍？
作为一个初学者想掌握Java并不是很容易,Java本身是具有一定难度的,虽然说兴趣这东西可以让我们学习不累,但是有多少人学习是因为兴趣,或者有多少人知道自己的兴趣在哪?所以我很明确的告诉你学习这事本来 ...
Java学习必不可少的网站，快收藏起来
java技术在IT互联网行业的发展前景一直在提升,越来越多的人都在学习java技术,今天小编来给大家提供一些学习Java的网站集合,希望能够帮助到正在学习java技术的同学. Java学习必不可少的网 ...
分享五款java学习辅助工具，总有你用的上的~
想要学好java技术,除了自身的努力,辅助工具也不缺少,辅助工具可以帮助大家在今后的工作中可以提高工作效率,下面小编就来分享五款java学习辅助工具,总有你用的上的~ 五款java学习辅助工具: 1. ...
Java学习从入门到精通的学习建议
想要学好java技术,首先打好基础很重要,不论学什么基础都是重中之重,学习Java更是如此.如:基础语法.核心类库.面向对象编程.异常.集合.IO流等基础如果学不好,那么后边更深入的语法也不容易学会. ...
java学习笔记11--Annotation
java学习笔记11--Annotation Annotation:在JDK1.5之后增加的一个新特性,这种特性被称为元数据特性,在JDK1.5之后称为注释,即:使用注释的方式加入一些程序的信息. j ...
java学习笔记13--反射机制与动态代理
本文地址:http://www.cnblogs.com/archimedes/p/java-study-note13.html,转载请注明源地址. Java的反射机制在Java运行时环境中,对于任意 ...
JAVA学习资源网站
中文java技术网--http://www.cn-java.com/ 灰狐动力(http://www.huihoo.com/)-- 该站点有许多的开源的项目的介绍和学习,涉及操作系统,数据库等许多方向 ...
我的WEB之路（一）-2.JAVA学习路线
第一阶段:针对性夯实JAVA基础课程名称核心要点完成目标 Java基础入门搭建Java开发和运行环境等,IDE工具的学习和使用,Java语言基础,数据类型,运算符,条件和循环,数组使用等,Ja ...
准备写java学习笔记
准备写java学习笔记 java int 转载于:https://blog.51cto.com/cryingcloud/1975267
Java学习笔记--StringTokenizer的使用
2019独角兽企业重金招聘Python工程师标准>>> Java Tips: 使用Pattern.split替代String.split String.split方法很常用,用于切割 ...

java学习-veu

java学习-veu相关推荐

最新文章

热门文章