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的更多相关文章

随机推荐

  1. BeautifulSoup标签定位方法总结

    首先说明一下两个基本函数 .find() 和 .findAll(). find()返回第一个符合要求的标签 findAll()返回一个由所有符合要求的标签组成的列表.除此之外基本相同. 0.直接定位 ...

  2. es学习(三):分词器介绍以及中文分词器ik的安装与使用

    什么是分词 把文本转换为一个个的单词,分词称之为analysis.es默认只对英文语句做分词,中文不支持,每个中文字都会被拆分为独立的个体. 示例 POST http://192.168.247.8: ...

  3. C语言系列之自增自减运算符的用法(二)

    运算符中最难理解的有自增自减运算符的使用方法,下面我将简单总结一下他们的使用方法 我们知道,C语言运行是由右向左运行的 下面我们来看一个例子 当i等于3的时候 j=++i; 由上面可知,C语言是由右向 ...

  4. ORACLE-SQLLOAD导入外部数据详解

    今天公司需要把外部文本的一些数据导入到数据库.这里把相关步骤和注意的地方记录,供需要的人参考学习!这里的环境是在windows下的数据库,linux或者其他数据库同理! 1.准备工作:创建需要导入数据 ...

  5. DataGuard---->主库和备库都配置 db_file_name_convert和log_file_name_convert的作用

    一.参数说明 [1] db_file_name_convert db_file_name_convert 主数据库和备用数据库的数据文件转换目录对映(如果两数据库的目录结构不一样),如果有多个对映,逐 ...

  6. Python3 (一) 基本类型

    前言: 什么是代码? 代码是现实世界事物在计算机世界中的映射. 什么事写代码? 写代码是将现实世界中的事物用计算机语言来描述. 一.数字:整形与浮点型 整型:int 浮点型:float (没有单精度和 ...

  7. python的Django构建web应用

    创建一个网上购物的网站 首先创建一个简单的python项目,然后在终端输入pip install django 安装Django框架 然后输入django-admin startproject pys ...

  8. 17-SSM中通过pagehelper分页的实现

    SSM中通过pagehelper分页的实现 1. 在SSM框架的基础上实现,导包 <!-- 分页 --> <dependency> <groupId>com.git ...

  9. Ubuntu mysql踩坑记录

    安装: 1.sudo apt-get install mysql-server 2. apt-get isntall mysql-client 3.  sudo apt-get install lib ...

  10. mongo操作备忘

    #查看collection内 某个字段条目数 db.dictionary_system.find({"name":"xxx"}).count() #清空某个co ...