vue小介绍

最新推荐文章于 2024-05-16 23:40:36 发布

2301_76674526

最新推荐文章于 2024-05-16 23:40:36 发布

阅读量859

点赞数 20

文章标签： vue.js

本文链接：https://blog.csdn.net/2301_76674526/article/details/135270576

版权

这里写目录标题
Vue
什么是Vue.js?
Vue.js优点
Vue安装
第一个Vue demo
模板语法
Vue指令
Vue生命周期
**Vue组件**
Vue
什么是Vue.js?
Vue(读音 /vjuː/，类似于 view())是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。Vue的核心库之关心视图层，不仅易于上手，还便于与第三方库或既有项目整合。

Vue.js是前端的主流框架之一，和Angular.js，React.js,并成为前端三大主流框架

Vue.js优点
1.体积小，压缩后33kb

2.更高的运行效率

用JQuery或者原生的JavaScript DOM 操作函数对DOM进行频繁操作的时候，浏览器要不停的渲染新的DOM树，导致页面看起来非诚卡顿。

基于虚拟 dom，一种可以预先通过 JavaScript 进行各种计算，把最终的 DOM 操作计算出来并优化的技术，由于这个 DOM 操作属于预处理操作，并没有真实的操作 DOM，所以叫做虚拟 DOM.最后在计算完毕才真正将 DOM 操作提交，将 DOM 操作变化反映到 DOM 树上。

3.双向数据绑定，简化Dom操作

通过MVVM思想实现数据的双向绑定，让开发者不用再操作Dom对象，把更多的经历投入到业务逻辑上

4.生态丰富，学习成本低

市场上有大量成熟的，稳定的基于vue.js的ui框架，常用组件！即拿即用快速开发！对初学者友好，入门容易，学习资料多

Vue安装
方式一：直接用

下载 Vue.js 并导入 js 文件

方式 2:命令行工具 (CLI)

安装教程给出了更多安装 Vue 的方式。请注意我们不推荐新手直接使用 vue-cli，尤其是在你还不熟悉基于 Node.js 的构建工具时。

第一个Vue demo
1.导入开发版本的 Vue.js

2.创建 Vue 实例对象，设置 el 属性和 data 属性

3.使用简洁的模板语法把数据渲染到页面上 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

一个vue样例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>

       <div id="app">
           {{message}}, 
           <p>{{age+10>20?"成年人":"青年"}}</p>
           {{users.name}} {{users.age}}
           {{city}}

       </div>


       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app", //数据挂载点
               data:{ //数据
                   message:"hello vue !!!",
                   age:20,
                   users:{name:'jim',age:20},
                   city:['西安','汉中']
               }
           });

       </script>

   </body>
</html>

结果：

代码解析：

{{变量}}模板语法插值表达式获取数据

new Vue();创建 Vue 对象(VM 对象)

el:数据挂载的 dom 对象

Vue会管理el选项命中的元素及其元素的后代元素

可以使用其他的选择器，但是建议使用 ID 选择器

可以使用其他的闭合标签，不能使用 HTML 和 BODY

data:{ message:’hello world’} model 数据

Vue中用到的数据定义在data中

data中可以写复杂类型的数据，如对象，数组

渲染复杂类型数据时，遵循js语法即可

模板语法
Vue.js使用了基于HTMl的模板语法，允许开发者声明式的将DOM绑定至底层Vue实例的数据。所有Vue.js的模板都是合法的HTML，所以能被遵循规范的浏览器和Html解析器解析。

在在底层的实现上，Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统，Vue 能够智能地计算出最少需要重新渲染多少组件，并把 DOM 操作次数减到最少。

插值文本

数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值：

Message: {{ msg }}

Mustache 标签将会被替代为对应数据对象上 msg property 的值。无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。

使用 JavaScript 表达式迄今为止，在我们的模板中，我们一直都只绑定简单的 property 键值。但实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript表达式支持。

这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。有个限制就是，每个绑定都只能包含单个表达式，所以下面的例子都不会生效。

{{ if (ok) { return message } }}

Vue指令
指令带有v-开头以表示它们是Vue提供的特殊属性。

v-text

作用是设置标签的文本内容

默认写法会替换全部内容，使用差值表达式可以替换指定内容

内部支持写表达式

v-html

作用是设置元素的 innerHTML

内容中有 html 结构会被解析为标签

内部支持写表达式

</head>
<body>
   <div id="app">
       
       <span>{{message}} aaaaaa</span>
       <span v-text="message">bbbbb</span>
       <span v-html="message">ccccc</span>
   </div>

   <script type="text/javascript">

/* new Vue() 创建vue对象 ViewModel*/
var app = new Vue({
el:"#app",
data:{
message:“hello vue !!!”
}
});

</body>
结果：

v-on

作用是为元素绑定事件

事件名不需要写 on 指令可以简写为@

绑定的方法定义在 methods 属性中,可以传入自定义参数

methods:{

test(a,b){

alert(a);

}

代码示例：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">
           <input type="button" value="按钮1" v-on:click="test(1,2)" />
           <input type="button" value="按钮2" @dblclick="test1(1,2)" />
       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   message:"<b>hello vue !!!</b>"
               },
               methods:{//定义函数
                   test(a,b){
                       alert("aaaaaaaa"+a+":"+b);
                   },
                   test1(a,b){
                       alert("aaaaaaaa"+a+":"+b);
                   }
               }
           });

       </script>

   </body>
</html>

结果：

v-model

作用是便捷的设置和获取表单元素的值

绑定的数据会和表单元素值相关联

绑定的数据<---->表单元素的值双向数据绑定

data:{message:""

}

代码实例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">
           
           <input type="text" value="" v-model="account"/>
           <input type="text" value="" v-model="password"/>
           <p v-text="account"></p>
           <input type="button" value="测试" @click="test()" />
       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   account:"",
                   password:""
               },
               methods:{
                   test(){
                       this.account = "123456";
                   }
               }
           });

       </script>

   </body>
</html>

v-show

作用是根据真假切换元素的显示状态原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值值为 true 元素显示，值为 false 元素隐藏数据改变之后，对应元素的显示状态会同步更新
data:{

isShow:true,

age:20

}

代码实例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">
           <input type="button" value="按钮1" v-show="isshow" />
           <input type="button" value="按钮2" v-show="num>18"/>
       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   isshow:false,
                   num:10
               }
           });

       </script>

   </body>
</html>

结果：

v-if

作用是根据表达式的真假切换元素的显示状态本质是通过操纵 dom 元素来切换显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除频繁的切换 v-show，反之使用 v-if，前者的切换消耗小

主要是和v-show区别

代码实例：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">
           

           <input type="button" value="按钮1" v-if="isshow" />
           <input type="button" value="按钮2" v-if="num>18"/>
           <input type="button" value="按钮3" v-else />


       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   isshow:true,
                   num:10
               }
           });

       </script>

   </body>
</html>

结果：

v-bind

作用是为元素绑定属性完整写法是 v-bind：属性名简写的话可以直接省略 v-bind，只保留：属性名

data:{

imgSrc:‘img/3.jpg’ imgTitle:“这是一张图片”

}

代码实例：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">

       
           <p v-bind:align="a">qqqqq</p>
           <p :align="a">qqqqq</p>
           <input type="button" value="测试" @click="test()" />
       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   a:"center"
               },
               methods:{
                   test(){
                       this.a = "right";
                   }
               }
           });

       </script>

   </body>
</html>

结果：

v-for

作用是根据数据生成列表结构

数组经常和 v-for 结合

使用语法是（item，index）in 数据 item 和 index 可以结合其他指令一起使用数组长度的更新会同步到页面上是响应式的为循环绑定一个 key 值 :key=”值” 尽可能唯一

{{item}}省

{{index+1}}{{item}}省

data:{

array:[‘陕西’,‘山西’,‘河南’],

objects:[

{name:‘admin’,age:23},

{name:‘jim’,age:22}

]

}

代码实例：
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title></title>
       <script src="js/vue.js"></script>

   </head>
   <body>
       <div id="app">

       <table border="1">
               <tr v-for="(user,index) in users" :key="index">
                   <td>{{index+1}}</td>
                   <td>{{user.name}}</td>
                   <td>{{user.age}}</td>
               </tr>
           </table>
       </div>

       <script type="text/javascript">

       /* new Vue() 创建vue对象 ViewModel*/
       var app = new Vue({
               el:"#app",
               data:{
                   users:[]
               },
               methods:{//z自定义函数

               },
               //下面的是VUE生命周期钩子函数在每个生命周期阶段会提供一个函数,让我们去执行一些操作
               beforeCreate() {
                   console.log("beforeCreate")
               },
               created() {
                   console.log("created") //页面加载 vue对象被创建后, 向后端自动发送请求
                   this.users = [
                       {name:'jim1',age:20},
                           {name:'jim2',age:20},
                           {name:'jim3',age:20},
                           {name:'jim4',age:20},
                           ];
               },
               beforeMount() {
                   console.log("beforeMount")
               },
               mounted() {
                   console.log("mounted")
               }
           });

       </script>

   </body>
</html>

结果：

2301_76674526

关注

20
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
vue小介绍

作用是根据表达式的真假切换元素的显示状态本质是通过操纵 dom 元素来切换显示状态表达式的值为 true，元素存在于 dom 中，为 false，从 dom 中移除频繁的切换 v-show，反之使用 v-if，前者的切换消耗小。与其他大型框架不同的是Vue被设计为可以自底向上逐层应用。作用是根据真假切换元素的显示状态原理是修改元素的 display，实现显示隐藏指令后面的内容，最终都会解析为布尔值值为 true 元素显示，值为 false 元素隐藏数据改变之后，对应元素的显示状态会同步更新。
复制链接

扫一扫