vue_day02
vue_day02
1.绑定事件指令 v-on
<body>
<div id="app">
<button v-on:click="num++">按钮1</button>
<button @click="num++">按钮2</button>
<button @click="countSum()">按钮3</button>
<button @click="countSum">按钮4</button> <button @click="say('师姐')">按钮5</button><br/>
{{num}}
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
num: 0
},
methods: {
countSum(){
this.num++;
},
say(msg) {
alert("你好!" + msg);
}
}
})
</script>
2.计算属性 computed
<body>
<div id="app">
前台页面拼接：{{new Date(birthday).getFullYear() + "年" + new Date(birthday).getMonth() + "月" + new Date(birthday).getDay() + "日"}}<br/>
使用计算属性：{{formatterDate}}<br/>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
birthday:1529032123201
},
computed:{
formatterDate(){
return new Date(this.birthday).getFullYear() + "年" + new Date(this.birthday).getMonth() + "月" + new Date(this.birthday).getDay() + "日";
}
}
})
</script>
3.监控值得变化 watch
watch 可以让我们监控一个值的变化。从而做出相应的反应。
<body>
<div id="app">
<input type="text" v-model="newMsg"/><br/>
{{"newMsg:" + newMsg}}<br/>
{{"oldMsg:" + oldMsg}}<br/>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
newMsg:"newMsg",
oldMsg:"oldMsg"
},
watch:{
newMsg(newValue, oldValue) {
this.newMsg = newValue;
this.oldMsg = oldValue;
}
}
})
</script>
4.vue组件
(1)以前组件: Component --easyui 组件 datagrid tabs menu...panel,dialog
Vue组件: 自定义的代码块或者自定义标签 <atag></atag>
(2)组件有什么用:
(1)可以反复使用
(2)完成一些功能
(3)vue里面组件分类
全局组件:任意地方都可以使用,任意挂载的标签都使用
局部组件:只能在当前的挂载的标签里面的使用
vue组件是vue里面比较重要知识点
4.1 全局组件
<body>
<div id="app">
<dyier></dyier>
<mydyier></mydyier>
</div>
<div id="app1">
<dyier></dyier>
<mydyier></mydyier>
</div>
</body>
<script type="text/javascript">
//全局组件
Vue.component("dyier",{
template:"<h3>h3标题的dyier</h3>"
}); var mydyier = {
template: "<h2>h2标题的dyier</h2>"
};
Vue.component("mydyier", mydyier); new Vue({
el: "#app",
});
new Vue({
el: "#app1",
});
</script>
4.2 局部组件
<body>
<div id="app">
<dyier></dyier>
<mydyier></mydyier>
</div>
<div id="app1">
<dyier></dyier>
</div>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
components:{
"dyier":{
template:"<h1>h1标题的dyier</h1>"
},
"mydyier":{
template: "<h2>h2标题的mydyier</h2>"
}
}
}); new Vue({
el: "#app1"
});
</script>
4.3 组件template里面模板的写法
<body>
<div id="app">
<dyier></dyier>
<mydyier></mydyier>
</div>
<!-- 方式一 template标签的方式 -->
<template id="dyier">
<h1>template标签引用的方式</h1>
</template> <!--方式二 用script的方式-->
<script type="text/template" id="myDyier">
<h2>script template标签的方式</h2>
</script>
</body>
<script type="text/javascript">
//方式一：直接以字符串的方式写出来
/*new Vue({
el: "#app",
components:{
"dyier":{
template:"<h1>h1标题的dyier</h1>"
},
"mydyier":{
template: "<h2>h2标题的mydyier</h2>"
}
}
});*/ //方式二，引用
new Vue({
el: "#app",
components:{
"dyier":{
template: "#dyier"
},
"mydyier":{
template: "#myDyier"
}
}
})
</script>
4.4 模板里面的data数据必须是函数
<body>
<div id="app">
<dyier></dyier>
<hr/>
<!-- 取到的值是data里面的name("德莱厄斯")-->
{{name}}
</div>
<!-- 方式一 template标签的方式 -->
<template id="dyier">
<form>
<!-- 会找template组件里面的name("dyier"),不会找data里的name("德莱厄斯")-->
{{name}}:<input type="text"/>
</form>
</template>
</body>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
name: "德莱厄斯"
},
components: {
"dyier": {
template: "#dyier",
data: function () {
return {
"name": "dyier"
}
}
}
}
})
</script>
5. 路由
找路
vue路由: 定位到一个组件 类似于<a href="">
5.1 路由的使用
(1)安装 路由
npm install vue-router
npm uninstall vue-router
(2)在页面引用vue-router.js文件
<script type="text/javascript" src="node_modules/vue-router/dist/vue-router.js"></script>
(3)使用
1 <body>
2 <div id="app">
3 <!-- router-link相当于a标签-->
4 <router-link to="/">首页</router-link>
5 <router-link to="/employee">员工列表</router-link>
6 <router-link to="/product">产品列表</router-link>
7 <!-- 路由出口-->
8 <router-view></router-view>
9 </div>
10 </body>
11 <script type="text/javascript">
12 //定义组件
13 var index = Vue.component("index", {
14 template: "<h1>欢迎来到首页</h1>"
15 });
16 var employee = Vue.component("employee", {
17 template: "<h2>查看员工列表</h2>"
18 });
19 var product = Vue.component("product", {
20 template: "<h2>查看产品列表</h2>"
21 });
22 //创建一个路由
23 var routes = new VueRouter({
24 routes: [{
25 path: "/",
26 component: index
27 }, {
28 path: "/employee",
29 component: employee
30 }, {
31 path: "/product",
32 component: product
33 }]
34 });
35
36 new Vue({
37 el: "#app",
38 //把路由挂在到vue上
39 router:routes
40 })
41 </script>
6. webpack打包
把项目里面内容(js,css,img等)这些资料进行打包
6.1 为什么需要打包 -->项目开发完之后
(1)减少单页面内的衍生请求次数，提高网站效率
(2) 将ES6的高级语法进行转换编译，以兼容老版本的浏览器。
导入 导出
(3)可以进行代码混淆 提高安全性
6.2 webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分
析，然后将这些模块按照指定的规则生成对应的静态资源。
6.3 使用webpack --打包js文件
(1)下载安装
npm install -g webpack
npm install -g webpack-cli
(2)创建两个js文件
a.js
var a ="测试a";
var b = require("./b.js"); console.log(a);
console.log(b)
b.js
define(function(){
var b = "测试b";
return b;
});
执行命令:
webpack src/a.js -o dist/bundle.js
6.4 css打包
步骤一：
npm install style-loader --save-dev
npm install css-loader --save-dev
步骤二：
a.js引用
var a ="测试a";
var b = require("./b.js"); console.log(a);
console.log(b);
require("../css/index.css");
步骤三：在webpack.config.js文件引入下面代码
var path = require("path");
module.exports = {
entry: './js/a.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.css$/, //匹配文件规则
use: ['style-loader', 'css-loader'] //匹配后使用什么加载器进行模块加载
// webpack use的配置，是从右到左进行加载的
},
]
}
};
步骤四：打包：webpack
6.5 部署项目
把前端内容放入服务里面运行
(1)安装
npm install webpack-dev-server --save-dev
(2)package.json配置
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
}
版本兼容性:
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
(3)运行 npm run dev命令 启动服务
ctrl+c --->y 停止服务
7. Vue的脚手架
Vue脚手架 --就是前端项目的模板(已经就有一些内容)
7.1 使用脚手架
(1) 安装脚手架
npm install -g vue-cli
(2)创建一个项目
(3)执行 vue init webpack
询问创建项目 yes
询问vue-router yes
... no
(4)运行命令
npm run dev
vue_day02的更多相关文章
随机推荐
- 人生需要Plan B
天有不测风云,人有祸兮旦福.2020年,刚打开就是地狱模式! 武汉加油,中国加油! 新冠状肺炎的强传播性,让人们不得不乖乖待在家,工地开不了工,白领不能上班,农村封村,城市封小区.人们每天在一个小范围 ...
- Vue 常用三种传值方式
Vue常用的三种传值方式: 父传子 子传父 非父子传值 引用官网一句话:父子组件的关系可以总结为 prop 向下传递,事件向上传递.父组件通过 prop 给子组件下发数据,子组件通过事件给父组件发送消 ...
- c++中的动态内存分配
使用new和delete动态的分配和释放内存 使用new来分配新的内存块,通常情况下,如果成功,new将返回一个指针,指向分配的内存,否则将引发异常,使用new时,需要指定要为那种数据类型分配内存: ...
- BZOJ 2733 [HNOI2012]永无乡 (权值线段树启发式合并+并查集)
题意: n<=1e5的图里,在线连边.查询某连通块第k大 思路: 练习线段树合并的好题,因为依然记得上一次启发式合并trie的时候内存爆炸的恐怖,所以这次还是用了动态开点.回收 听说启发式合并s ...
- centos7 手把手从零搭建深度学习环境 (以TensorFlow2.0为例)
目录 一. 搭建一套自己的深度学习平台 二. 安装系统 三. 安装NVIDA组件 四. 安装深度学习框架 TensorFlow 五. 配置远程访问 六. 验收 七. 福利(救命稻草
- 【python爬虫】windoes的爬虫中文乱码现象，通用转码解决
page = session.get(url="https://www.qidian.com/") page.encoding = page.apparent_encoding p ...
- python常用模块集合
python常用模块集合 Python自定义模块 python collections模块/系列 Python 常用模块-json/pickle序列化/反序列化 python 常用模块os系统接口 p ...
- 使用helm安装jenkin和gitlab
一.使用服务介绍 存储: 阿里云NAS k8s网络插件: calico k8s版本: 1.15.2 二.helm安装 https://www.cnblogs.com/zhangb8042/p/1020 ...
- ntp时间服务器 时间同步
具体两种模式 1.服务器数量比较少,可以直接与时间服务器同步 2.本地服务器较多,在本地自建时间同步服务器, 时间同步的两个命令 ntpd : 校准时间,一点点的校准过来时间的 ...
- U盘制作macOS Sierra的启动盘
1.macOS Sierra的几种安装方式 *开机时按住command+option+r 进行联网在线安装.PS:在网速好的情况还行,但是如果网络差的时候,它会让你崩溃的. *使用光盘进行安装. *今 ...