淘先锋技术网

首页 1 2 3 4 5 6 7

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
[email protected]

编写HTML页面

编写步骤:

  1. 采用

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

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

  1. 标签体显示数据: {{xxxxx}}

  2. 表单元素双向数据绑定: v-model

  3. 注意:el的值不能为 html 或 body

VueDevtools插件安装

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

在这里插入图片描述
将 Vue.js_devtools_5.1.0.zip直接拖到上面页面空白处,会自动安装
在这里插入图片描述
效果如下则安装成功
在这里插入图片描述
当你访问Vue开发的页面时,按 F12可访问Vue 标签页
在这里插入图片描述

模板数据绑定渲染

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

  1. {{xxxx}} 双大括号文本绑定
    格式: {{表达式}}
    作用:使用在标签体中,用于获取数据
    可以使用 JavaScript 表达式
  2. 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 >
 <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>