欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

一起学Vue之入门篇

程序员文章站 2022-05-22 18:53:46
Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。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>

备注

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

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

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