Vue框架—快速入门

🔖 认识VUE

🔖 第一个Vue程序

🔖 Vue指令

🏷️v-text

🏷️v-html

🏷️v-model

🏷️v-bind

🏷️v-on

🏷️v-if / v-show

🔖 认识VUE

▐ 在学习Vue框架前，我们需要了解什么是框架？

• 框架就是在语言的基础上，把一些常用的、重复出现的功能进行封装，使得开发人员可以更高效的进行开发。

• Vue.js是一个前端JS框架，简化了JS操作，其中MVVM思想实现了数据的双向绑定，即标签展示和JS中的数据，任意一方发生改变，框架就会自动更新另一方，这样我们就无需直接操作DOM对象，效率更高；并且VUE生态丰富，学习成本低。

• Vue只是对js进行了封装，不是代替js，基础语法还是js的。

🔖 第一个Vue程序

▐ 准备工作

介绍 — Vue.js (vuejs.org)https://v2.cn.vuejs.org/v2/guide/ • 点击链接进入官网，按如下步骤引入Vue框架

▐ 第一个Vue程序

• 我们的第一个vue程序：Hello Vue！

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><!-- {{插值表达式}} -->{{message}}</div><script>// new Vue对象var app = new Vue({el: '#app', //将id为app的标签与Vue对象进行绑定data: {    //data中定义与标签进行双向绑定的数据，可以定义多组message:'Hello Vue!'}})</script></body>
</html>

• 可以对照注释理解每句代码的含义

🔖 Vue指令

🏷️v-text

• v-text 会覆盖标签体中的内容 (插值表达式插入变量，不会覆盖标签体中的内容 )

• v-text 会把内容当做文本来处理

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><p>{{message}} 天道酬勤</p><p v-text="message">天道酬勤</p></div><script>var app = new Vue({el: '#app', data: {    message:"<b>Hello Vue</b>"}})</script></body>
</html>

运行结果：

🏷️v-html

• v-html 会覆盖标签体中的内容

• v-html 会把内容当做html 内容处理，可以解析标签

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script>	</head><body><div id="app"><p v-text="message">天道酬勤</p><p v-html="message">天道酬勤</p></div><script>var app = new Vue({el: '#app', data: {    message:"<b>Hello Vue</b>"}})</script></body>
</html>

运行结果：

🏷️v-model

• 可以将输入框的value值与vue中数据进行绑定；当输入框值发生改变时，自动更新的数据中.

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script>	</head><body><div id="app"><input type="text" v-model="message"/><p>{{message}}</p></div><script>var app = new Vue({el: '#app', data: {    message:""}})</script></body>
</html>

⌨️运行结果：

代码执行过程：

🏷️v-bind

• v-bind 可以动态改变属性的值，只需要在 js中改变变量的值即可。

完整写法是 v-bind：属性名，也可以省略v-bind，简写为：属性名

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script></head><body><!-- v-bind : 标签属性名="变量"--><div id="app"><img :src="img" :title="title"></div><script>var app = new Vue({el: '#app',data: {    img: "img/2.jpg",title :"这是蓝色T恤"}})</script></body>
</html>

🏷️v-on

• v-on ：事件名为标签添加事件

• 函数需要定义在methods 属性中

• v-on: 也可以使用@替换 @click="test()"

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><img :src="img" :title="title" /><input type="button" value="切换" v-on:click="test()" /></div><script>var app = new Vue({//绑定标签el: '#app',//定义数据data: {   img:"img/1.jpg",title:"这是红色T恤"},//定义函数methods:{test(){this.img="img/2.jpg";this.title="这是蓝色T恤";}}	  })</script></body>
</html>

🏷️v-if / v-show

• v-if 和 v-show 都可以控制标签的显示或隐藏，在视觉效果上一样.

• 区别：v-if 隐藏标签时，是直接将标签从网页中删除；v-show则只是改变了标签的display的值.

频繁的切换建议使用 v-show，切换消耗小，反之使用 v-if

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title></title><!-- 导入vue封装的js文件 --><script src="js/vue.js"></script></head><body><div id="app"><img :src="img" v-if="isshow"/><img :src="img" v-show="isshow"/></div><script>var app = new Vue({//绑定标签el: '#app',//定义数据data: {    img:"img/1.jpg",isshow:true},//定义函数methods:{}	  })</script></body>
</html>

🏷️结语：

希望这篇关于Vue框架入门的介绍到能对大家有所帮助，欢迎大佬们留言或私信与我交流学海漫浩浩,我亦苦作舟!大家一起学习,一起进步!

本人微信: g2279605572