Vue.js入门

最新推荐文章于 2024-07-14 11:16:56 发布

果子牛奶巧克力

最新推荐文章于 2024-07-14 11:16:56 发布

阅读量715

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_53411879/article/details/121321355

版权

Vue.js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

01-Vue.js

Vue 是什么

Vue 是什么

主流的渐进式 JavaScript 框架

学习资源

英文官网：https://vuejs.org/

中文官网（中文文档很友好）：https://cn.vuejs.org/

官方教程：https://cn.vuejs.org/v2/guide/

GitHub：https://github.com/yyx990803

API文档：https://cn.vuejs.org/v2/api/

发展历史

2013年12月8号在 GitHub 上发布了 0.6 版

2015年10月份正式发布了 1.0 版本，开始真正的火起来
2016年10月份正式发布了 2.0 版

2019.4.8号发布了 Vue 2.5.10 版本 https://github.com/vuejs/vue/releases

1.x 版本老项目可能还在用，新项目绝对都是选择 2.x

Vue入门开发

创建工程和安装vueD:\桌面\vue.js\vuetest\01\01.html 模块
在集成终端内输入“npm install vue@2.6.10”

编写HTML页面

编写步骤：

采用

el选项：元素element的缩写，指定被 Vue 管理的 Dom 节点入口（值为选择器 )，必须是一个普通的HTML 标签节点，一般是 div。

data选项：指定初始化数据，在 Vue 所管理的 Dom 节点下，可通过模板语法来进行使用

标签体显示数据： {{xxxxx}}
表单元素双向数据绑定： v-model
注意：el的值不能为 html 或 body

VueDevtools插件安装

Vue Devtools 插件让我们在一个更友好的界面中审查和调试 Vue 项目。

在这里插入图片描述
将 Vue.js_devtools_5.1.0.zip直接拖到上面页面空白处，会自动安装

效果如下则安装成功

当你访问Vue开发的页面时，按 F12可访问Vue 标签页

模板数据绑定渲染

可生成动态的HTML页面，页面中使用嵌入 Vue.js 语法可动态生成

{{xxxx}} 双大括号文本绑定
格式： {{表达式}}
作用：使用在标签体中，用于获取数据
可以使用 JavaScript 表达式
v-xxxx 以v-开头用于标签属性绑定，称为指令

v-指令

v-once：一次性插值

通过使用 v-once指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。

v-html：输出HTML指令

格式： v-html=‘xxx’
作用：
如果是HTML格式数据，双大括号会将数据解释为普通文本，为了输出真正的 HTML，你需要使用v-html指令。

Vue 为了防止 XSS 攻击，在此指令上做了安全处理，当发现输出内容有 script 标签时，则不渲染。

XSS 攻击主要利用 JS 脚本注入到网页中，读取 Cookie 值（Cookie一般存储了登录身份信息），读取到了发送到黑客服务器，从而黑客可以使用你的帐户做非法操作。

XSS 攻击还可以在你进入到支付时，跳转到钓鱼网站。

v-on：事件绑定指令

完整格式： v-on:事件名称=“事件处理函数名”。
缩写格式： @事件名称=“事件处理函数名” 注意： @ 后面没有冒号。
作用：用于监听 DOM 事件。
案例源码：每点击1次，数据就加1。

v-bind：元素绑定指令

完整格式： v-bind:元素的属性名=‘xxxx’。
缩写格式： :元素的属性名=‘xxxx’。
作用：将数据动态绑定到指定的元素上。

完整源代码

<!DOCTYPE html>	
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Vue-模板数据绑定渲染</title>
 </head>
 <body>
 <div id="app">
 <h3>1、双大括号输出文本内容</h3> 10	<!--文本内容-->
 <p>普通文本：{{ message }}</p>
 <!--使用JS表达式-->
 <p>JS表达式：{{ number + 1 }}</p>

 <h3>2、一次性插值 v-once </h3>
 <span v-once> 这个将不会改变: {{ message }}</span>

 <h3>3、v-html 指令输出真正的 HTML 内容</h3>
 <p>双大括号：{{ contentHtml }}</p>
 <!-- 指令的值不需要使用双大括号获取 -->
 <!-- <p>v-html指令：<span v-html="{{contentHtml}}"></span></p> -->
 <p>v-html指令：<span v-html="contentHtml"></span></p>

<h3>4、v-bind 属性绑定指令</h3>

<!-- 直接写属性名是获取不到-->

<img src="imgUrl" alt="VueLogo">

<!-- 红色字体是正常的 -->

<img v-bind:src="imgUrl" alt="VueLogo">

<!-- 缩写 -->

<img :src="imgUrl" alt="VueLogo">

<h3>5、v-on 事件绑定指令</h3>

<input type="text" v-model="num">

<button v-on:click="add">点击+1</button>

</div>

<br>

<script src="./node_modules/vue/dist/vue.js"></script>

<script type="text/javascript"> var vm = new Vue({

el: '#app', data: {

message: 'haha', number: 1,

contentHtml: '<span style="color:red">红色字体内容</span>',

imgUrl: 'https://cn.vuejs.org/images/logo.png', num: 2

},

methods: { //指定事件处理方法, 在模板页面中通过 v-on:事件名 来调用

add: function () { //key为方法名console.log('add 被 调 用 ') vm.num++ //每点击1次num加1

}

}

})

</script>

</body>

</html>

果子牛奶巧克力

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue.js入门

01-Vue.jsVue 是什么学习资源发展历史Vue入门开发编写HTML页面VueDevtools插件安装模板数据绑定渲染v-指令v-once：一次性插值v-html：输出HTML指令v-on：事件绑定指令v-bind：元素绑定指令完整源代码Vue 是什么主流的渐进式 JavaScript 框架学习资源英文官网：https://vuejs.org/中文官网（中文文档很友好）：https://cn.vuejs.org/官方教程：https://cn.vuejs.org/v2/guide/
复制链接

扫一扫