Vue的简单入门

一、什么是Vue？

vue.js也一个渐进式JavaScript框架，可以独立完成前后端分离式web项目

渐进式：vue可以从小到控制页面中的一个变量后到页面中一块内容再到整个页面，最后大到整个项目，都可以用vue框架来实现

目的：通过对框架的了解与运用程度，来决定其在整个项目中的应用范围，最终可以独立以框架方式完成整个web前端项目

二、为什么要学习Vue

1.Vue是三大前端框架之一，其他2个为：Angular ，React

2.整合了Angular React框架的优点（Vue是中国人写的，第一手API文档是中文的）

3.单页面应用（得益于vue的组件化开发，令前台的代码可以复用）

4.虚拟DOM（提高操作DOM的效应）

5.数据驱动（将数据渲染到指定区域）

6.数据的双向绑定（在页面中完成基于数据的交互方式）

三、如何在页面中使用Vue

开发版本：vue.js

生产版本：vue.min.js

  1. <body>
  2.     <div id="box1">
  3.         <!--{{ }} 会被vue解析为数据的渲染的指定语法-->
  4.         {{ }}
  5.     </div>
  6.     <hr>
  7.     <div class="box2">
  8.         {{ }}
  9.     </div>
  10. </body>
  11. <script src="js/vue.js"></script>
  12. <script>
  13.     // 如何使用jq框架 <= 拿到jq框架的对象 $ | jQuery
  14.     // 类比：如何使用vue框架 <= 拿到vue框架的对象 new Vue()
  15.  
  16.     // vue对象需要手动创建， 原因，一个vue对象可以只控制页面中的某一部分， 如果一个页面有多个部分都需要被控制，那么就需要创建多个vue对象
  17.     // vue对象如何与控制的页面进行关联（绑定），采用的是vue对象中的挂载点(挂载点可以唯一标识页面中的某一个区域)
  18.     new Vue({
  19.         el: "#box1"
  20.         // 挂在在id为box1的div上，那么该div下的所有内容都由该vue对象来控制
  21.     })
  22.  
  23.     new Vue({
  24.         el: '.box2'
  25.         // 挂在在class为box2的div上，那么该div下的所有内容都由该vue对象来控制（尽量使用id，唯一标识）
  26.     })
  27. </script>

四、Vue实例

1.el：实例

  1. new Vue({
  2.     el: '#app'
  3. })
  4. // 实例与页面挂载点一一对应
  5. // 一个页面中可以出现多个实例对应多个挂载点
  6. // 实例只操作挂载点内部内容

2.data：数据

  1. <div id='app'>
  2.     {{ msg }}
  3. </div>
  4. <script>
  5.     var app = new Vue({
  6.         el: '#app',
  7.         data: {
  8.             msg: '数据',
  9.         }
  10.     })
  11.     console.log(app.$data.msg);
  12.     console.log(app.msg);
  13. </script>
  14. <!-- data为插件表达式中的变量提供数据 -->
  15. <!-- data中的数据可以通过Vue实例直接或间接访问-->

3.methods：方法

  1. <style>
  2.     .box { background-color: orange }
  3. </style>
  4. <div id='app'>
  5.     <p class="box" v-on:click="pClick">测试</p>
  6.     <p class="box" v-on:mouseover="pOver">测试</p>
  7. </div>
  8. <script>
  9.     var app = new Vue({
  10.         el: '#app',
  11.         methods: {
  12.             pClick () {
  13.                 // 点击测试
  14.             },
  15.             pOver () {
  16.                 // 悬浮测试
  17.             }
  18.         }
  19.     })
  20. </script>
  21. <!-- 了解v-on:为事件绑定的指令 -->
  22. <!-- methods为事件提供实现体-->

4.computed：计算

  1. <div id="app">
  2.      <input type="text" v-model="a">
  3.     <input type="text" v-model="b">
  4.     <div>
  5.         {{ c }}
  6.     </div>
  7. </div>
  8.  
  9. <script>
  10.     // 一个变量依赖于多个变量
  11.     new Vue({
  12.         el: "#app",
  13.         data: {
  14.             a: "",
  15.             b: "",
  16.         },
  17.         computed: {
  18.             c: function() {
  19.                 // this代表该vue实例
  20.                 return this.a + this.b;
  21.             }
  22.         }
  23.     })
  24. </script>

5.watch：监听

  1. <div id="app">
  2.      <input type="text" v-model="ab">
  3.     <div>
  4.         {{ a }}
  5.         {{ b }}
  6.     </div>
  7. </div>
  8.  
  9. <script>
  10.     // 多个变量依赖于一个变量
  11.     new Vue({
  12.         el: "#app",
  13.         data: {
  14.             ab: "",
  15.             a: "",
  16.             b: "",
  17.         },
  18.         watch: {
  19.             ab: function() {
  20.                 // 逻辑根据需求而定
  21.                 this.a = this.ab[0];
  22.                 this.b = this.ab[1];
  23.             }
  24.         }
  25.     })
  26. </script>

6.delimiters：分隔符

  1. <div id='app'>
  2.     ${ msg }
  3. </div>
  4. <script>
  5.     new Vue({
  6.         el: '#app',
  7.         data: {
  8.             msg: 'message'
  9.         },
  10.         delimiters: ['${', '}']
  11.     })
  12. </script>

五、生命周期钩子

  • 表示一个vue实例从创建到销毁的这个过程,将这个过程的一些时间节点赋予了对应的钩子函数

  • 钩子函数: 满足特点条件被回调的方法

  1. new Vue({
  2.     el: "#app",
  3.     data: {
  4.         msg: "message"
  5.     },
  6.     beforeCreate () {
  7.         console.log("实例刚刚创建");
  8.         console.log(this.msg);
  9.     },
  10.     created () {
  11.         console.log("实例创建成功, data, methods已拥有");
  12.         console.log(this.msg);
  13.     },
  14.     mounted () {
  15.         console.log("页面已被vue实例渲染, data, methods已更新");
  16.     }
  17.     // 拿到需求 => 确定钩子函数 => 解决需求的逻辑代码块
  18. })

六、Vue指令

1.文本相关指令

  1. <div id="app">
  2.     <!-- 插值表达式 -->
  3.     <p>{{ msg }}</p>
  4.     <!-- eg:原文本会被msg替换 -->
  5.     <p v-text='msg'>原文本</p>
  6.     <!-- 可以解析带html标签的文本信息 -->
  7.     <p v-html='msg'></p>
  8.     <!-- v-once控制的标签只能被赋值一次 -->
  9.     <p v-once>{{ msg }}</p>
  10. </div>
  11. <script type="text/javascript">
  12.     // 指令: 出现在html标签中可以被vue解析处理的全局属性
  13.     new Vue({
  14.         el: "#app",
  15.         data: {
  16.             msg: "message"
  17.         }
  18.     })
  19. </script>

2.斗篷指令

  1. <style type="text/css">
  2.     [v-cloak] { display: none; }
  3. </style>
  4. <div id="app" v-cloak>
  5.     {{ msg }}
  6. </div>
  7. <script src="js/vue.min.js"></script>
  8. <script type="text/javascript">
  9.     new Vue({
  10.         el: "#app",
  11.         data: {
  12.             msg: "message"
  13.         }
  14.     })
  15. </script>
  16. <!-- 避免页面闪烁-->

3.属性指令

  1. <!-- 给自定义全局属性绑定变量 -->
  2. <p v-bind:abc="abc"></p>
  3. <!-- 以原字符串形式绑定全局属性 -->
  4. <p v-bind:title="'abc'"></p>
  5.  
  6. <!-- 单类名绑定 -->
  7. <p v-bind:class="c1"></p>
  8. <!-- 多类名绑定 -->
  9. <p v-bind:class="[c2, c3]"></p>
  10. <!-- 类名状态绑定 -->
  11. <p v-bind:class="{c4: true|false|var}"></p>
  12. <!-- 多类名状态绑定 -->
  13. <p v-bind:class="[{c5: true}, {c6: flase}]"></p>
  14.  
  15. <!-- 样式绑定 -->
  16. <div :style="div_style"></div>
  17. <div :style="{width: '100px', height: '100px', backgroundColor: 'blue'}"></div>
  18. <script type="text/javascript">
  19.     new Vue({
  20.         el:"#app",
  21.         data: {
  22.             abc: "abc",
  23.             c1: "p1",
  24.             c2: "p2",
  25.             c3: "p3",
  26.             div_style: {
  27.                 width: "200px",
  28.                 height: "200px",
  29.                 backgroundColor: "cyan"
  30.             }
  31.         }
  32.     })
  33. </script>
  34. <!-- v-bind: 指令可以简写为 : -->
  1. <body>
  2.     <div id="app">
  3.         <!-- v-bind:属性 = "变量" -->
  4.         <!-- 如果abc自定义属性被v-bind:指令绑定了,后面的值也会成为vue变量, 如果就想是普通字符串, 再用''包裹 -->
  5.         <!-- : 就是 v-bind: 的简写方式 (1.常用 2.一定且只操作属性)-->
  6.         <p v-bind:abc="'abc'" v-bind:title="h_info" :def="hehe">abc</p>
  7.  
  8.         <!--最常用的两个属性 class | style-->
  9.  
  10.         <!--class-->
  11.         <p :class="a"></p> <!-- 单类名 -->
  12.         <p :class="[a, b]"></p> <!-- 多类名 -->
  13.         <p :class="{c: d}"></p> <!-- 了解: c为类名,是否起作用取决于d值为true|false 开关类名 -->
  14.         <!--style-->
  15.         <p :style="s1"></p> <!-- s1为一套样式 -->
  16.         <p :style="[s1, s2, {textAlign: ta}]">12345</p><!-- 了解: s1,s2均为一套样式, ta是一个变量,专门赋值给textAlign("text-align") --> 
  17.  
  18.     </div>
  19. </body>
  20. <script src="js/vue.js"></script>
  21. <script>
  22.     new Vue({
  23.         el: "#app",
  24.         data: {
  25.             h_info: "悬浮提示",
  26.             hehe: "呵呵",
  27.             a: 'active',
  28.             b: 'rule',
  29.             d: false,
  30.             s1: { // 样式1: 值1, ..., 样式n: 值n
  31.                 width: '200px',
  32.                 height: '200px',
  33.                 background: 'red'
  34.             },
  35.             s2: {
  36.                 borderRadius: '50%'
  37.             },
  38.             ta: 'center'
  39.         }
  40.     })
  41. </script>

4.事件指令

  1. <!-- v-on: 指令 简写 @ -->
  2. <!-- 不传参事件绑定，但事件回调方法可以获取事件对象 -->
  3. <p @click="fn"></p>
  4. <!-- ()可以传入具体实参 -->
  5. <p @click="fn()"></p>
  6. <!-- ()情况下，事件对象应该显式传入 -->
  7. <p @click="fn($event)"></p>
  1. <body>
  2.     <div id="app">
  3.         <!-- v-on:事件 = "变量 简写 @ -->
  4.         <!-- 事件绑定的变量可以在data中赋值,但建议在methods中赋值 -->
  5.         <p v-on:click="fn1">11111111111111</p>
  6.         <p @click="fn2">22222222222222</p>
  7.         <!--vue事件的绑定可以传自定义参数-->
  8.         <p @click="fn3(333)">3333333333333333</p>
  9.         <!--vue事件的绑定不传自定义参数, 默认将事件对象传过去了-->
  10.         <p @click="fn4">4444444444444444</p>
  11.         <!--vue事件的绑定传自定义参数, 还要将事件对象传过去了, 要明确传$event-->
  12.         <p @click="fn5(555, $event)">5555555555555555</p>
  13.  
  14.     </div>
  15. </body>
  16. <script src="js/vue.js"></script>
  17. <script>
  18.     new Vue({
  19.         el: "#app",
  20.         data: {
  21.             // 事件在data中提供一个函数地址,可以实现事件
  22.             fn1: function () {
  23.                 console.log("11111111111111")
  24.             }
  25.         },
  26.         // 事件尽量(要求)都放在vue实例的methods中
  27.         methods: {
  28.             fn2: function () {
  29.                 console.log("22222222222222")
  30.             },
  31.             fn3 (arg) {  // ES6语法
  32.                 console.log(arg)
  33.             },
  34.             fn4: function (ev) {
  35.                 console.log(ev)
  36.             },
  37.             fn5: function (arg, ev) {
  38.                 console.log(arg)
  39.                 console.log(ev)
  40.             },
  41.         }
  42.     })
  43. </script>

5.表单指令

  1. <div id="app">
  2.     <!-- v-model针对于表单元素 -->
  3.     <form action="" method="get">
  4.         <!-- 1、双向绑定：服务于文本输入框 -->
  5.         <!-- v-model存储的值为输入框的value值 -->
  6.         <div>
  7.             <input type="text" name="usr" v-model="in_val">
  8.             <input type="password" name="ps" v-model="in_val" >
  9.             <textarea name="info" v-model="in_val"></textarea>
  10.         </div>
  11.  
  12.         <!-- 2、单选框 -->
  13.         <div>
  14.             <!-- 单选框是以name进行分组，同组中只能发生单选 -->
  15.             <!-- v-model存储的值为单选框的value值 -->
  16.             男：<input type="radio" name="sex" value="男" v-model="ra_val">
  17.             女：<input type="radio" name="sex" value="女" v-model="ra_val">
  18.             {{ ra_val }}
  19.         </div>
  20.  
  21.         <!-- 3、单一复选框 -->
  22.         <!-- v-model存储的值为true|false -->
  23.         <!-- 或者为自定义替换的值 -->
  24.         <div>
  25.             <input type="checkbox" v-model='sin_val' true-value="选中" false-value="未选中" />
  26.             {{ sin_val }}
  27.         </div>
  28.  
  29.         <!-- 4、多复选框 -->
  30.         <!-- v-model存储的值为存储值多复选框value的数组 -->
  31.         <div>
  32.             <input type="checkbox" value="喜好男的" name="cless" v-model='more_val' />
  33.             <input type="checkbox" value="喜好女的" name="cless" v-model='more_val' />
  34.             <input type="checkbox" value="不挑" name="cless" v-model='more_val' />
  35.             {{ more_val }}
  36.         </div>
  37.     </form>
  38. </div>
  39.  
  40. <script type="text/javascript">
  41.     new Vue({
  42.         el: '#app',
  43.         data: {
  44.             in_val: '',
  45.             // 默认值可以决定单选框默认选项
  46.             ra_val: '男',
  47.             // 默认值为true，单一复选框为选中，反之false为不选中
  48.             sin_val: '',
  49.             // 数组中存在的值对应的复选框默认为选中状态
  50.             more_val: ['喜好女的','不挑']
  51.         }
  52.     })
  53. </script>

6.条件指令

  1. <div id="app">
  2.     <button @click="toggle">显隐切换</button>
  3.     <!-- v-if -->
  4.     <div class="box r" v-if="isShow"></div>
  5.     <!-- v-show -->
  6.     <div class="box o" v-show="isShow"></div>
  7.     <!-- 1.条件渲染的值为true|false -->
  8.     <!-- 2.true代表标签显示方式渲染 -->
  9.     <!-- 3.false v-if不渲染到页面,v-show以display:none渲染到页面,但也不会显示 -->
  10.  
  11.     <!-- v-if v-else-if v-else 案例 -->
  12.     <ul>
  13.         <li @mouseover="changeWrap(0)">red</li>
  14.         <li @mouseover="changeWrap(1)">green</li>
  15.         <li @mouseover="changeWrap(2)">blue</li>
  16.     </ul>
  17.     <!-- red页面逻辑结构 -->
  18.     <div class="wrap red" v-if="tag == 0" key="0">...</div>
  19.     <!-- green页面逻辑结构 -->
  20.     <div class="wrap green" v-else-if="tag == 1" key="1">...</div>
  21.     <!-- blue页面逻辑结构 -->
  22.     <div class="wrap blue" v-else key="2">...</div>
  23.     <!-- v-if相关分支操作,在未显示情况下,是不会被渲染到页面中 -->
  24.     <!-- 通过key全局属性操作后,渲染过的分支会建立key对应的缓存,提高下一次渲染速度 -->
  25.  
  26.     <!-- v-show 案例 -->
  27.     <ul>
  28.         <li @mouseover="changeMain(0)">red</li>
  29.         <li @mouseover="changeMain(1)">green</li>
  30.         <li @mouseover="changeMain(2)">blue</li>
  31.     </ul>
  32.     <!-- red页面逻辑结构 -->
  33.     <div class="main red" v-show="whoShow(0)">...</div>
  34.     <!-- green页面逻辑结构 -->
  35.     <div class="main green" v-show="whoShow(1)">...</div>
  36.     <!-- blue页面逻辑结构 -->
  37.     <div class="main blue" v-show="whoShow(2)">...</div>
  38. </div>
  39. <script type="text/javascript">
  40.     new Vue({
  41.         el: "#app",
  42.         data: {
  43.             isShow: false,
  44.             tag: 0,
  45.             flag: 0
  46.         },
  47.         methods: {
  48.             toggle () {
  49.                 this.isShow = !this.isShow;
  50.             },
  51.             changeWrap (num) {
  52.                 this.tag = num;
  53.             },
  54.             changeMain (num) {
  55.                 // this.flag num
  56.                 this.flag = num;
  57.             },
  58.             whoShow (num) {
  59.                 // this.flag num
  60.                 return this.flag == num;
  61.             }
  62.         }
  63.     })
  64. </script>

7.循环指令

  1. <div id="app">
  2.     <h1>{{ msg }}</h1>
  3.     <!-- v-for="item in items" -->
  4.     <!-- 遍历的对象: 数组[] 对象(字典){} -->
  5.     <ul>
  6.         <li>{{ list[0] }}</li>
  7.         <li>{{ list[1] }}</li>
  8.         <li>{{ list[2] }}</li>
  9.         <li>{{ list[3] }}</li>
  10.         <li>{{ list[4] }}</li>
  11.     </ul>
  12.  
  13.     <!-- n为遍历的元素值 -->
  14.     <ul>
  15.         <li v-for="n in list">{{ n }}</li>
  16.     </ul>
  17.  
  18.     <!-- 一般列表渲染需要建立缓存 -->
  19.     <!-- 列表渲染是循环,需要赋值变量给key,使用key需要v-bind:处理 -->
  20.     <!-- v-for变量数组[]时,接收两个值时,第一个为元素值,第二个为元素索引 -->
  21.     <ul>
  22.         <li v-for="(n, i) in list" :key="i">value:{{ n }} | index: {{ i }}</li>
  23.     </ul>
  24.  
  25.     <ul>
  26.         <li>{{ dic['name'] }}</li>
  27.         <li>{{ dic.age }}</li>
  28.         <li>{{ dic.gender }}</li>
  29.     </ul>
  30.  
  31.     <!-- v-for变量对象{}时,接收三个值时,第一个为元素值,第二个为元素键,第三个为元素索引 -->
  32.     <ul>
  33.         <li v-for="(v, k, i) in dic" :key="k">value:{{ v }} | key:{{ k }} | index: {{ i }}</li>
  34.     </ul>
  35.  
  36.     <!-- 遍历的嵌套 -->
  37.     <div v-for="(person, index) in persons" :key="index" style="height: 21px;">
  38.         <div v-for="(v, k) in person" :key="k" style="float: left;">{{ k }} : {{ v }}&nbsp;&nbsp;&nbsp;</div>
  39.     </div>
  40. </div>
  41. <script type="text/javascript">
  42.     new Vue({
  43.         el: "#app",
  44.         data: {
  45.             msg: "列表渲染",
  46.             list: [1, 2, 3, 4, 5],
  47.             dic: {
  48.                 name: 'zero',
  49.                 age: 88888,
  50.                 gender: 'god'
  51.             },
  52.             persons: [
  53.                 {name: "zero", age: 8},
  54.                 {name: "egon", age: 78},
  55.                 {name: "liuXX", age: 77},
  56.                 {name: "yXX", age: 38}
  57.             ]
  58.         }
  59.     })
  60. </script>

8.todolist案例

  1. <div id="app">
  2.     <div>
  3.         <input type="text" v-model="val">
  4.         <button type="button" @click="submitMsg">提交</button>
  5.     </div>
  6.     <ul>
  7.         <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li>
  8.     </ul>
  9.     {{ list }}
  10. </div>
  11. <script type="text/javascript">
  12.     new Vue({
  13.         el: "#app",
  14.         data: {
  15.             val: "",
  16.             list: []
  17.         },
  18.         methods: {
  19.             submitMsg () {
  20.                 if (this.val) {
  21.                     this.list.push(this.val);
  22.                     this.val = ""
  23.                 }
  24.             },
  25.             removeMsg(index) {
  26.                 this.list.splice(index, 1)
  27.             }
  28.         }
  29.     })
  30. </script>

七、组件

1.什么 是组件

  • 每一个组件都是一个vue实例

  • 每个组件均具有自身的模板template，根组件的模板就是挂载点

  • 每个组件模板只能拥有一个根标签

  • 子组件的数据具有作用域，以达到组件的复用

2.根组件

  1. <div id="app">
  2.     <h1>{{ msg }}</h1>
  3. </div>
  4. <script type="text/javascript">
  5.     // 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
  6.     // 每个组件组件均拥有模板,template
  7.     var app = new Vue({
  8.         // 根组件的模板就是挂载点
  9.         el: "#app",
  10.         data : {
  11.             msg: "根组件"
  12.         },
  13.         // 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
  14.         // 显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
  15.         template: "<div>显式模板</div>"
  16.     })
  17.     // app.$template
  18. </script>

3.局部组件

  1. <div id="app">
  2.     <local-tag></local-tag>
  3.     <local-tag></local-tag>
  4. </div>
  5. <script>
  6.     var localTag = {
  7.         data () {
  8.             return {
  9.                 count: 0
  10.             }
  11.         },
  12.         template: '<button @click="btnAction">局部{{ count }}</button>',
  13.         methods: {
  14.             btnAction () {
  15.                 this.count ++
  16.             }
  17.         }
  18.     }
  19.     new Vue({
  20.         el: "#app",
  21.         components: {
  22.             'local-tag': localTag
  23.         }
  24.     })
  25. </script>

4.全局组件

  1. <div id="app">
  2.     <global-tag></global-tag>
  3.     <global-tag></global-tag>
  4. </div>
  5. <script>
  6.     Vue.component('global-tag', {
  7.         data () {
  8.             return {
  9.                 count: 0
  10.             }
  11.         },
  12.         template: '<button @click="btnAction">全局{{ count }}</button>',
  13.         methods: {
  14.             btnAction () {
  15.                 this.count ++
  16.             }
  17.         }
  18.     })
  19.     new Vue({
  20.         el: "#app"
  21.     })
  22. </script>

5.父组件传递数据给子组件

通过绑定属性的方式进行数据传递

采用属性绑定的方式
1,父级提供数据
2.绑定给子组件的自定义属性
3.子组件通过props的数组拿到自定义属性从而拿到数据

  1. <div id="app">
  2.     <global-tag :sup_data1='sup_data1' :supData2='sup_data2'></global-tag>
  3. </div>
  4. <script type="text/javascript">
  5.     Vue.component('global-tag', {
  6.         props:['sup_data1', 'supdata2'],
  7.         template: '<div>{{ sup_data1 }} {{ supdata2 }}</div>'
  8.     })
  9.     new Vue({
  10.         el: '#app',
  11.         data: {
  12.             sup_data1: '数据1',
  13.             sup_data2: '数据2'
  14.         }
  15.     })
  16. </script>

6.子组件传递数据给父组件

通过发送事件请求的方式进行数据传递

采用发生事件的方式:
1.在子组件的内容系统事件中来定义一个自定义事件,采用$emit发生到自定义组件名上(可以携带子组件内容数据)
2.在父组件复用子组件时, 实现子组件自定义数据的功能, 在父组件中的methods中为功能绑定函数(函数的参数就是携带出来的数据)
3.当在组件内部激活系统事件,就会激活自定义事件,$emit发生给父级,激活父级绑定的函数,该函数被执行,同时拿到数据

  1. <div id="app">
  2.     <global-tag @send_action='receiveAction'></global-tag>
  3. </div>
  4. <script type="text/javascript">
  5.     Vue.component('global-tag', {
  6.         data () {
  7.             return {
  8.                 sub_data1: "数据1",
  9.                 sub_data2: '数据2'
  10.             }
  11.         },
  12.         template: '<div @click="clickAction">发生</div>',
  13.         methods: {
  14.             clickAction () {
  15.                 this.$emit('send_action', this.sub_data1, this.sub_data2)
  16.             }
  17.         }
  18.     })
  19.     new Vue({
  20.         el: '#app',
  21.         methods: {
  22.             receiveAction (v1, v2) {
  23.                 console.log(v1, v2)
  24.             }
  25.         }
  26.     })
  27. </script>

7.父子组件实现todolist

  1. <div id="app">
  2.     <div>
  3.         <input type="text" v-model="val">
  4.         <button type="button" @click="submitMsg">提交</button>
  5.     </div>
  6.     <ul>
  7.         <!-- <li v-for="(v, i) in list" :key="i" @click="removeMsg(i)">{{ v }}</li> -->
  8.         <todo-list v-for="(v, i) in list" :key="i" :v="v" :i="i" @delect_action="delect_action"></todo-list>
  9.     </ul>
  10. </div>
  11. <script type="text/javascript">
  12.     Vue.component("todo-list", {
  13.         template: "<li @click='delect_action'><span>第{{ i + 1 }}条: </span><span>{{ v }}</span></li>",
  14.         props: ['v', 'i'],
  15.         methods: {
  16.             delect_action () {
  17.                 this.$emit("delect_action", this.i)
  18.             }
  19.         }
  20.     })
  21.  
  22.     new Vue({
  23.         el: "#app",
  24.         data: {
  25.             val: "",
  26.             list: []
  27.         },
  28.         methods: {
  29.             submitMsg () {
  30.                 // 往list中添加input框中的value
  31.                 if (this.val) {
  32.                     this.list.push(this.val);
  33.                     this.val = ""
  34.                 }
  35.             },
  36.             delect_action(index) {
  37.                 this.list.splice(index, 1)
  38.             }
  39.         }
  40.     })
  41. </script>

八、Vue-CLI项目搭建

1.环境搭建

1.安装node.js

  1. 官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/

2.安装cnpm

  1. npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm -v 查看cnpm 安装是否成功

3.安装脚手架

  1. cnpm install -g @vue/cli

4.清空缓存处理

  1. npm cache clean --force

2.项目的创建

1.创建项目

  1. vue create 项目名
  2. // 要提前进入目标目录(项目应该创建在哪个目录下)
  3. // 选择自定义方式创建项目，选取Router, Vuex插件

2.启动、停止项目

  1. npm run serve / ctrl+c
  2. // 要提前进入项目根目录

3.打包项目

  1. npm run build
  2. // 要在项目根目录下进行打包操作

3.认识项目

1.项目目录

  1. dist: 打包的项目目录(打包后会生成)
  2. node_modules: 项目依赖
  3. public: 共用资源
  4. src: 项目目标,书写代码的地方
  5.     -- assets:资源
  6.     -- components:组件
  7.     -- views:视图组件
  8.     -- App.vue:根组件
  9.     -- main.js: 入口js
  10.     -- router.js: 路由文件
  11.     -- store.js: 状态库文件
  12. vue.config.js: 项目配置文件(没有可以自己新建)

2.配置文件：vue.config.js

  1. module.exports={
  2.     devServer: {
  3.         port: 8888
  4.     }
  5. }
  6. // 修改端口,选做

3.main.js

  1. new Vue({
  2.     el: "#app",
  3.     router: router,
  4.     store: store,
  5.     render: function (h) {
  6.         return h(App)
  7.     }
  8. })

4.后缀名为vue文件

  1. <template>
  2.     <!-- 模板区域 -->
  3. </template>
  4. <script>
  5.     // 逻辑代码区域
  6.     // 该语法和script绑定出现
  7.     export default {
  8.  
  9.     }
  10. </script>
  11. <style scoped>
  12.     /* 样式区域 */
  13.     /* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
  14. </style>

4.项目功能

1.vue-router

  1. {
  2.     path: '/',
  3.     name: 'home',
  4.     // 路由的重定向
  5.     redirect: '/home'
  6. }
  7.  
  8. {
  9.     // 一级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
  10.     path: '/one-view',
  11.     name: 'one',
  12.     component: () => import('./views/OneView.vue')
  13. }
  14.  
  15. {
  16.     // 多级路由, 在根组件中被渲染, 替换根组件的<router-view/>标签
  17.     path: '/one-view/one-detail',
  18.     component: () => import('./views/OneDetail.vue'),
  19.     // 子路由, 在所属路由指向的组件中被渲染, 替换该组件(OneDetail)的<router-view/>标签
  20.     children: [{
  21.         path: 'show',
  22.         component: () => import('./components/OneShow.vue')
  23.     }]
  24. }
  1. <!-- router-link渲染为a标签 -->
  2. <router-link to="/">Home</router-link> |
  3. <router-link to="/about">About</router-link> |
  4. <router-link :to="{name: 'one'}">One</router-link> |
  5.  
  6. <!-- 为路由渲染的组件占位 -->
  7. <router-view />
  1. a.router-link-exact-active {
  2.     color: #42b983;
  3. }
  1. // router的逻辑转跳
  2. this.$router.push('/one-view')
  3.  
  4. // router采用history方式访问上一级
  5. this.$router.go(-1)

2.vuex

  1. // 在任何一个组件中,均可以通过this.$store.state.msg访问msg的数据
  2. // state永远只能拥有一种状态值
  3. state: {
  4.     msg: "状态管理器"
  5. },
  6. // 让state拥有多个状态值
  7. mutations: {
  8.     // 在一个一个组件中,均可以通过this.$store.commit('setMsg', new_msg)来修改state中的msg
  9.     setMsg(state, new_msg) {
  10.         state.msg = new_msg
  11.     }
  12. },
  13. // 让mutations拥有多个状态值
  14. actions: {
  15.  
  16. }

3.vue-cookie

  1. // 安装cookie的命令
  2. // npm install vue-cookie --save
  3. // 为项目配置全局vue-cookie
  4. import VueCookie from 'vue-cookie'
  5. // 将插件设置给Vue原型,作为全局的属性,在任何地方都可以通过this.$cookie进行访问
  6. Vue.prototype.$cookie = VueCookie
  1. // 持久化存储val的值到cookie中
  2. this.$cookie.set('val', this.val)
  3. // 获取cookie中val字段值
  4. this.$cookie.get('val')

4.axios

  1. // 安装 axios(ajax)的命令
  2. // npm install axios--save
  3. // 为项目配置全局axios
  4. import Axios from 'axios'
  5. Vue.prototype.$ajax = Axios
  1. let _this = this
  2. this.$ajax({
  3.     method: 'post',
  4.     url: 'http://127.0.0.1:5000/loginAction',
  5.     params: {
  6.         usr: this.usr,
  7.         ps: this.ps
  8.     }
  9. }).then(function(res) {
  10.     // this代表的是回调then这个方法的调用者(axios插件),也就是发生了this的重指向
  11.     // 要更新页面的title变量,title属于vue实例
  12.     // res为回调的对象,该对象的data属性就是后台返回的数据
  13.     _this.title = res.data
  14. }).catch(function(err) {
  15.     window.console.log(err)
  16. })
  1. # 用pycharm启动该文件模拟后台
  2. from flask import Flask, request, render_template
  3. from flask_cors import CORS
  4. app = Flask(__name__)
  5. CORS(app, supports_credentials=True)
  6.  
  7. @app.route('/')
  8. def index():
  9.     return "<h1>主页</h1>"
  10.  
  11. @app.route('/loginAction', methods=['GET', 'POST'])
  12. def test_action():
  13.     # print(request.args)
  14.     # print(request.form)
  15.     # print(request.values)
  16.     usr = request.args['usr']
  17.     ps = request.args['ps']
  18.     if usr != 'abc' or ps != '':
  19.         return 'login failed'
  20.     return 'login success'
  21.  
  22. if __name__ == '__main__':
  23.     app.run()

Vue的简单入门的更多相关文章

  1. 基于vue-cli、elementUI的Vue超简单入门小例子

    - 这个例子还是比较简单的,独立完成后,能大概知道vue是干嘛的,可以写个todoList的小例子. - 开始写例子之前,先对环境的部署做点简单的介绍,其实和Vue官方的差不多. #如若没有安装过vu ...

  2. 98、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  3. 13、vue.js简单入门

    本篇导航: 介绍与安装 vue常用指令 一.介绍与安装 vue是一套构建用户界面的JAVASCRIPT框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层, ...

  4. Vue.js简单入门

    这篇文章我们将学习vue.js的基础语法,对于大家学习vue.js具有一定的参考借鉴价值,有需要的朋友们下面来一起看看. Vue.js是一个数据驱动的web界面库.Vue.js只聚焦于视图层,可以很容 ...

  5. webpack4+vue打包简单入门

    前言 最近在研究使用webpack的使用,在查阅了数篇文章后,学习了webpack的基础打包流程. 本来就可以一删了之了,但是觉得未免有点可惜,所以就有了这篇文章,供大家参考. webpack打包的教 ...

  6. vue.js 简单入门

    转载自:http://blog.csdn.net/violetjack0808/article/details/51451672 <!DOCTYPE html> <html lang ...

  7. 一篇文章带你了解网页框架——Vue简单入门

    一篇文章带你了解网页框架--Vue简单入门 这篇文章将会介绍我们前端入门级别的框架--Vue的简单使用 如果你以后想从事后端程序员,又想要稍微了解前端框架知识,那么这篇文章或许可以给你带来帮助 温馨提 ...

  8. .NET Core实战项目之CMS 第六章 入门篇-Vue的快速入门及其使用

    写在前面 上面文章我给大家介绍了Dapper这个ORM框架的简单使用,大伙会用了嘛!本来今天这篇文章是要讲Vue的快速入门的,原因是想在后面的文章中使用Vue进行这个CMS系统的后台管理界面的实现.但 ...

  9. vue-cli脚手架搭建项目简单入门一

    搭建系统: Windows系统 简单了解Node.js.npm,安装Node.js,下载网址:http://nodejs.cn/download/ 查看node,npm安装成功与否.打开cmd命令行, ...

随机推荐

  1. springboot的几种启动方式

    一:IDE 运行Application这个类的main方法 二:在springboot的应用的根目录下运行mvn spring-boot:run 三:使用mvn install 生成jar后运行 先到 ...

  2. MCV 和 MTV框架基本信息

    一 . MCV # web服务器开发最著名的MVC模式 M : model.py 就是和数据库打交道的, 创建表等操作 V : view 视图(视图函数,就是装HTML文件的) C : control ...

  3. 魔术方法：__set、__get

    __set: 在设置对象里边不能直接设置(或没有)的属性值的时候,自动去被调用 class Track { private $track_name; public function __set($na ...

  4. NPOI 上传Excel功能

    1.首先写一个Excel表格,第一行数据库类型(varchar.date.decimal).第二行数据库类型长度(100.12,4.时间日期为空)2.html 加按钮 { type: "bu ...

  5. 配置Web.config 元素CustomErrors

    一.customErrors 元素 属性 说明 defaultRedirect 指定出错时将浏览器定向到的默认 URL.如果未指定该属性,则显示一般性错误. 可选的属性. URL 可以是绝对的(如 w ...

  6. 因为网络安全的重要性打算学习linux

    互联网的普及,在给人们带来巨大便利的同时,也让人们感受到网络安全隐患带给人们的不安与威胁.尤其是随着计算机技术和网络技术应用范围的不断扩充,网络安全方面存在的漏洞也越来越多,在这种情况下,如何提高网络 ...

  7. Civil 3D 二次开发 名称模板不能正常工作

    using Autodesk.AECC.Interop.Land; using Autodesk.AECC.Interop.UiLand; using Autodesk.AutoCAD.Applica ...

  8. mysql 测试php连接问题

    <?php$servername = "shuhua.dbhost";$username = "shuhua_user";$password = &quo ...

  9. BZOJ2829信用卡凸包——凸包

    题目描述 输入 输出 样例输入 2 6.0 2.0 0.0 0.0 0.0 0.0 2.0 -2.0 1.5707963268 样例输出 21.66 提示 本样例中的2张信用卡的轮廓在上图中用实线标出 ...

  10. BZOJ4873[Shoi2017]寿司餐厅——最大权闭合子图

    题目描述 Kiana最近喜欢到一家非常美味的寿司餐厅用餐.每天晚上,这家餐厅都会按顺序提供n种寿司,第i种寿司有一个 代号ai和美味度di,i,不同种类的寿司有可能使用相同的代号.每种寿司的份数都是无 ...