vue_day02

1.绑定事件指令 v-on

 1 <body>
 2 <div id="app">
 3     <button v-on:click="num++">按钮1</button>
 4     <button @click="num++">按钮2</button>
 5     <button @click="countSum()">按钮3</button>
 6     <button @click="countSum">按钮4</button>
 7 
 8     <button @click="say('师姐')">按钮5</button><br/>
 9     {{num}}
10 </div>
11 </body>
12 <script type="text/javascript">
13     new Vue({
14         el: "#app",
15         data: {
16             num: 0
17         },
18         methods: {
19             countSum(){
20                 this.num++;
21             },
22             say(msg) {
23                 alert("你好!" + msg);
24             }
25         }
26     })
27 </script>

2.计算属性 computed

 1 <body>
 2 <div id="app">
 3     前台页面拼接：{{new Date(birthday).getFullYear() + "年" + new Date(birthday).getMonth() + "月" + new Date(birthday).getDay() + "日"}}<br/>
 4     使用计算属性：{{formatterDate}}<br/>
 5 </div>
 6 </body>
 7 <script type="text/javascript">
 8     new Vue({
 9         el: "#app",
10         data: {
11             birthday:1529032123201
12         },
13         computed:{
14             formatterDate(){
15                 return new Date(this.birthday).getFullYear() + "年" + new Date(this.birthday).getMonth() + "月" + new Date(this.birthday).getDay() + "日";
16             }
17         }
18     })
19 </script>

3.监控值得变化 watch

watch 可以让我们监控一个值的变化。从而做出相应的反应。

 1 <body>
 2 <div id="app">
 3     <input type="text" v-model="newMsg"/><br/>
 4     {{"newMsg:" + newMsg}}<br/>
 5     {{"oldMsg:" + oldMsg}}<br/>
 6 </div>
 7 </body>
 8 <script type="text/javascript">
 9     new Vue({
10         el: "#app",
11         data:{
12             newMsg:"newMsg",
13             oldMsg:"oldMsg"
14         },
15         watch:{
16             newMsg(newValue, oldValue) {
17                 this.newMsg = newValue;
18                 this.oldMsg = oldValue;
19             }
20         }
21     })
22 </script>

4.vue组件

(1)以前组件: Component --easyui 组件 datagrid tabs menu...panel,dialog

Vue组件: 自定义的代码块或者自定义标签 <atag></atag>

(2)组件有什么用:

(1)可以反复使用

(2)完成一些功能

(3)vue里面组件分类

全局组件:任意地方都可以使用,任意挂载的标签都使用

局部组件:只能在当前的挂载的标签里面的使用

vue组件是vue里面比较重要知识点

4.1 全局组件

 1 <body>
 2 <div id="app">
 3     <dyier></dyier>
 4     <mydyier></mydyier>
 5 </div>
 6 <div id="app1">
 7     <dyier></dyier>
 8     <mydyier></mydyier>
 9 </div>
10 </body>
11 <script type="text/javascript">
12     //全局组件
13     Vue.component("dyier",{
14         template:"<h3>h3标题的dyier</h3>"
15     });
16 
17     var mydyier = {
18         template: "<h2>h2标题的dyier</h2>"
19     };
20     Vue.component("mydyier", mydyier);
21 
22     new Vue({
23         el: "#app",
24     });
25     new Vue({
26         el: "#app1",
27     });
28 </script>

4.2 局部组件

 1 <body>
 2 <div id="app">
 3     <dyier></dyier>
 4     <mydyier></mydyier>
 5 </div>
 6 <div id="app1">
 7     <dyier></dyier>
 8 </div>
 9 </body>
10 <script type="text/javascript">
11     new Vue({
12         el: "#app",
13         components:{
14             "dyier":{
15                 template:"<h1>h1标题的dyier</h1>"
16             },
17             "mydyier":{
18                 template: "<h2>h2标题的mydyier</h2>"
19             }
20         }
21     });
22 
23     new Vue({
24         el: "#app1"
25     });
26 </script>

4.3 组件template里面模板的写法

 1 <body>
 2 <div id="app">
 3     <dyier></dyier>
 4     <mydyier></mydyier>
 5 </div>
 6 <!-- 方式一 template标签的方式 -->
 7 <template id="dyier">
 8     <h1>template标签引用的方式</h1>
 9 </template>
10 
11 <!--方式二 用script的方式-->
12 <script type="text/template" id="myDyier">
13     <h2>script template标签的方式</h2>
14 </script>
15 </body>
16 <script type="text/javascript">
17     //方式一：直接以字符串的方式写出来
18     /*new Vue({
19         el: "#app",
20         components:{
21             "dyier":{
22                 template:"<h1>h1标题的dyier</h1>"
23             },
24             "mydyier":{
25                 template: "<h2>h2标题的mydyier</h2>"
26             }
27         }
28     });*/
29 
30     //方式二，引用
31     new Vue({
32         el: "#app",
33         components:{
34             "dyier":{
35                 template: "#dyier"
36             },
37             "mydyier":{
38                 template: "#myDyier"
39             }
40         }
41     })
42 </script>

4.4 模板里面的data数据必须是函数

 1 <body>
 2 <div id="app">
 3     <dyier></dyier>
 4     <hr/>
 5     <!--    取到的值是data里面的name("德莱厄斯")-->
 6     {{name}}
 7 </div>
 8 <!-- 方式一 template标签的方式 -->
 9 <template id="dyier">
10     <form>
11         <!--    会找template组件里面的name("dyier"),不会找data里的name("德莱厄斯")-->
12         {{name}}:<input type="text"/>
13     </form>
14 </template>
15 </body>
16 <script type="text/javascript">
17     new Vue({
18         el: "#app",
19         data: {
20             name: "德莱厄斯"
21         },
22         components: {
23             "dyier": {
24                 template: "#dyier",
25                 data: function () {
26                     return {
27                         "name": "dyier"
28                     }
29                 }
30             }
31         }
32     })
33 </script>

5. 路由

找路

vue路由: 定位到一个组件类似于<a href="">

5.1 路由的使用

(1)安装路由

npm install vue-router

npm uninstall vue-router

(2)在页面引用vue-router.js文件

(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

1 var a ="测试a";
2 var b = require("./b.js");
3 
4 console.log(a);
5 console.log(b)

b.js

1 define(function(){
2     var b = "测试b";
3     return b;
4 });

执行命令:

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引用

1 var a ="测试a";
2 var b = require("./b.js");
3 
4 console.log(a);
5 console.log(b);
6 require("../css/index.css");

步骤三：在webpack.config.js文件引入下面代码

 1 var path = require("path");
 2 module.exports = {
 3     entry: './js/a.js',
 4     output: {
 5         path: path.resolve(__dirname, './dist'),
 6         filename: 'bundle.js'
 7     },
 8     module: {
 9         rules: [
10             {
11                 test: /\.css$/,     //匹配文件规则
12                 use: ['style-loader', 'css-loader']    //匹配后使用什么加载器进行模块加载
13                 // webpack use的配置，是从右到左进行加载的
14             },
15         ]
16     }
17 };

步骤四：打包：webpack

6.5 部署项目

把前端内容放入服务里面运行

(1)安装

npm install webpack-dev-server --save-dev

(2)package.json配置

1 "scripts": {
2     "test": "echo \"Error: no test specified\" && exit 1",
3     "dev": "webpack-dev-server --inline --progress --config ./webpack.config.js"
4   }
5  版本兼容性:
6       "webpack": "^3.10.0",
7     "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

posted @ 2019-12-30 19:43 dyier 阅读(135) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Study preparation

vue_day02

vue_day02

1.绑定事件指令 v-on

2.计算属性 computed

3.监控值得变化 watch

4.vue组件

4.1 全局组件

4.2 局部组件

4.3 组件template里面模板的写法

4.4 模板里面的data数据必须是函数

5. 路由

5.1 路由的使用

6. webpack打包

6.1 为什么需要打包 -->项目开发完之后

6.2 webpack

6.3 使用webpack --打包js文件

6.4 css打包

6.5 部署项目

7. Vue的脚手架

7.1 使用脚手架

公告