01-Vue.js
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页面
编写步骤：
-
采用
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 >
<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>