一起学Vue之入门篇

概述

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue的特点

易用：已经会了 HTML、CSS、JavaScript？即刻阅读指南开始构建应用！
灵活：不断繁荣的生态系统，可以在一个库和一套完整框架之间自如伸缩。
高效：a. 20kB min+gzip 运行大小 b. 超快虚拟 DOM c. 最省心的优化

Vue的引用

想要在程序中引用，可以采用如下方式：

1 <!-- 开发环境版本，包含了有帮助的命令行警告 -->
2 <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

或者

1 <!-- 生产环境版本，优化了尺寸和速度 -->
2 <script src="https://cdn.jsdelivr.net/npm/vue"></script>

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统，如下所示：

以文件插值的方式绑定文本内容。写法如下：{{message}}。

el 表示Vue绑定的容器ID，data表示数据变量。

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>一起学Vue</title>
 6         <!-- 开发环境版本，包含了有帮助的命令行警告 -->
 7         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
 8     </head>
 9     <body>
10         <div id="app">
11             {{message}}
12         </div>
13         <script type="text/javascript">
14             var app=new Vue({
15                 el:"#app",
16                 data:{
17                     message:'welcome to vue world!'                        
18                 }
20             });
22         </script>
23     </body>
24 </html>

我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。

注意：script必须放置在div的后面，如果放置head中，会提示找不到元素app。

v-bind绑定元素属性

除了文本插值，我们还可以像这样来绑定元素特性：以v-bind，进行绑定title,格式如下：v-bind:title="message"

1 <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>

条件判断

v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)

如下所示：sean表示data的一个变量，初始值为true

1 <p v-if="sean"> {{message}} </p>
2 <p v-show="sean">{{message}}</p>

列表循环

v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现。

1 <ul>
2     <li v-for="(todo ,index) in todos">{{todo.text}}---{{index}}</li>
3 </ul>

todos也是data的一个变量，如下所示：

 1 data:{
 2     message:'welcome to vue world!',
 3     sean:true,
 4     todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
 5     groceryList: [
 6         { id: 0, text: '蔬菜' },
 7         { id: 1, text: '奶酪' },
 8         { id: 2, text: '随便其它什么人吃的东西' }
 9     ]                        
10 }

在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。

绑定事件

v-on:click 用于绑定单击事件，如下所示：

1 <button v-on:click="handleClick" >点击一下</button>

其中handleClick是vue中的一个自定义事件，如下所示：

1 methods:{
2     handleClick:function(){
3         this.todos.push({text:'学习C#'});
4     }
5 }

表单输入

Vue 还提供了 v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。

如下所示：

1 <input type="text" v-model="message" />

自定义组件

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例。在 Vue 中注册组件很简单，如下所示：

props表示变量列表，其中‘todo’为变量名称，在使用时v-bind:todo="item"关联起来即可。

1 Vue.component('todo-item1',{
2     //todo-item1,现在接收一个prop的自定义属性，prop名为todo
3     props:['todo'],
4     template:'<li>{{todo.text}}---{{todo.id}}</li>'
5 });

使用时如下所示：

1 <ol>
2     <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id"></todo-item1>
3 </ol>

其中groceryList 是定义的一个对象数组。

学习手册

最好的学习就是官网的指导手册，本例中涉及的代码如下所示：

  1 <!DOCTYPE html>
  2 <html>
  3     <head>
  4         <meta charset="utf-8" />
  5         <title>一起学Vue</title>
  6         <!-- 开发环境版本，包含了有帮助的命令行警告 -->
  7         <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  8     </head>
  9     <body>
 10         <div id="app">
 11             <!--
 12                 作者：Alan.hsiang@qq.com
 13                 时间：2019-11-18
 14                 描述：以文件插值的方式绑定文本内容
 15             -->
 16             {{message}}
 17             <br />
 18             <!--
 19                 作者：Alan.hsiang@qq.com
 20                 时间：2019-11-18
 21                 描述：以v-bind，进行绑定title,格式如下：v-bind:title="message"
 22             -->
 23             <span v-bind:title="message">鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
 24             <br />
 25             <!--
 26                 作者：Alan.hsiang@qq.com
 27                 时间：2019-11-18
 28                 描述：v-if="sean"用于判断是否显示标签(通过DOM的新增或删除),
 29                 v-show="sean"用于判断是否显示标签(通过样式来实现，如：display: none;)
 30             -->
 31             <p v-if="sean"> {{message}} </p>
 32             <p v-show="sean">{{message}}</p>
 33             <br />
 34             <!--
 35                 作者：Alan.hsiang@qq.com
 36                 时间：2019-11-18
 37                 描述：v-for 用于展示数组内容，通过改变元素的值，并不能触发页面发生变化，只有通过变异方法实现，
 38                 如：push,pop,splice,
 39             -->
 40             <ul>
 41                 <li v-for="(todo ,index) in todos">
 42                     {{todo.text}}---{{index}}
 43                 </li>
 44             </ul>
 45             <!--
 46                 作者：Alan.hsiang@qq.com
 47                 时间：2019-11-18
 48                 描述：v-on:click 用于绑定单击事件
 49             -->
 50             <button v-on:click="handleClick" >点击一下</button>
 51             <!--
 52                 作者：Alan.hsiang@qq.com
 53                 时间：2019-11-18
 54                 描述：v-model 实现表单输入和应用状态之间的双向绑定
 55             -->
 56             <input type="text" v-model="message" />
 57             <br />
 58             <ul>
 59                 <to-item></to-item>
 60             </ul>
 61             <ol>
 62                 <todo-item1 v-for="item in groceryList" v-bind:todo="item" v-bind:key="item.id">
 63                     
 64                 </todo-item1>
 65             </ol>
 66         </div>
 67         <!--
 68             作者：Alan.hsiang@qq.com
 69             时间：2019-11-18
 70             描述：script必须放置在div的后面，如果放置head中，会提示找不到元素app
 71         -->
 72         <script type="text/javascript">
 73             //声明一个简单的组件
 74             Vue.component('to-item',{
 75                 template:'<li>这是待办项</li>'
 76             });
 77             Vue.component('todo-item1',{
 78                 //todo-item1,现在接收一个prop的自定义属性，prop名为todo
 79                 props:['todo'],
 80                 template:'<li>{{todo.text}}---{{todo.id}}</li>'
 81             })
 82             var app=new Vue({
 83                 el:"#app",
 84                 data:{
 85                     message:'welcome to vue world!',
 86                     sean:true,
 87                     todos:[{text:'学习java script'},{text:'学习html'},{text:'学习java'}],
 88                     groceryList: [
 89                         { id: 0, text: '蔬菜' },
 90                         { id: 1, text: '奶酪' },
 91                         { id: 2, text: '随便其它什么人吃的东西' }
 92                     ]                        
 93                 },
 94                 methods:{
 95                     handleClick:function(){
 96                         this.todos.push({text:'学习C#'});
 97                     }
 98                 }
 99                 
100             });
101             
102         </script>
103     </body>
104 </html>

View Code

备注

一首清新小诗，点散午后的烦忧。

山居秋暝
作者：王维 (唐)

空山新雨后，天气晚来秋。
明月松间照，清泉石上流。
竹喧归浣女，莲动下渔舟。
随意春芳歇，王孙自可留。

posted @ 2019-11-23 15:56 老码识途呀阅读(1383) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

老码识途

绳锯木断，水滴石穿，专心写文，无问西东！！！