vue学习
vue介绍
Vue是一套用于构建用户界面的渐进式框架。
也就是可以边学习边开发，渐进式学习，关键在于应用
特点：
1，易于上手
2，是一种插件式的开发，
类似python中的flask，所以我喜欢使用flask+vue进行前后端分离的开发，
另外：
官方指南假设你已了解关于 HTML、CSS 和 JavaScript 的中级知识。
第一步，安装vue
安装方式1：
直接用 <script> 引入
直接下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。
安装方式2：cdn引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
安装方式3，
在用 Vue 构建大型应用时推荐使用 NPM 安装。
NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。
npm install vue
安装方式4，vue-cli
Vue 提供了一个官方的 CLI，为单页面应用 (SPA) 快速搭建繁杂的脚手架。
CLI 工具假定用户对 Node.js 和相关构建工具有一定程度的了解。
如果你是新手，强烈建议先在不用构建工具的情况下通读指南，在熟悉 Vue 本身之后再使用 CLI。
helloworld
<!DOCTYPE html>
<html>
<head>
<title>My first Vue app</title>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue liqian!'
}
})
</script>
</body>
</html>
- 声明式渲染
- 上面这种html里面有一个id，利用{{ }} 模板语法
- 然后再script里面新建一个vue，这里面进行了元素和数据绑定，
- 这种就是声明式的渲染，
- 我们已经成功创建了第一个 Vue 应用！看起来这跟渲染一个字符串模板非常类似，
但是 Vue 在背后做了大量工作。现在数据和 DOM 已经被建立了关联，所有东西都是响应式的。
我们要怎么确认呢？打开你的浏览器页面并修改 app.message 的值，你将看到上例相应地更新。 - 注意我们不再和 HTML 直接交互了。
一个 Vue 应用会将其挂载到一个 DOM 元素上 (对于这个例子是 #app) 然后对其进行完全控制。
那个 HTML 是我们的入口，但其余都会发生在新创建的 Vue 实例内部。
第二步，指令v-bind
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>My first Vue app</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
<div id="app-2">
<span v-bind:title="message">
page 鼠标悬停几秒钟查看此处动态绑定的提示信息！
</span>
<div style=" 100px; height: 100px; border: 1px solid #000000" :style="bgcolor"></div>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
});
var app2 = new Vue({
el: '#app-2',
data: {
message: '页面加载于 ' + new Date().toLocaleString(),
bgcolor:{
backgroundColor:"#000"
}
}
});
</script>
</body>
</html>
- 遇到了一点新东西。你看到的 v-bind attribute 被称为指令。指令带有前缀 v-
- 它们会在渲染的 DOM 上应用特殊的响应式行为。
- 该指令的意思：“将这个元素节点的title属性和 Vue 实例的 message property 保持一致”。
- v-bind指令，要好好体会他的用法，
条件v-if
html：
<div id="app-3">
<p v-if="seen">现在你看到我了</p>
</div>
js：
var app3 = new Vue({
el: '#app-3',
data: {
seen: true
}
})
- 很明显，可以通过seen: true或者false，进行控制是否显示
- 至于这个指令是如何运行的，怎么就能达到了这个效果，现在不去深究，后面再说
循环v-for
<div id="app-4">
<ol>
<li v-for="todo in todos">
{{ todo.index }}---{{ todo.text }}---{{ todo.age }}
</li>
</ol>
</div>
var app4 = new Vue({
el: '#app-4',
data: {
todos: [
{text: '学习 JavaScript',age:17},
{text: '学习 Vue',age:18},
{text: '整个牛项目',age:19}
]
}
});
- 很明显这是循环，很好
- 在控制台里，输入 app4.todos.push({ text: '新项目' })，你会发现列表最后添加了一个新项目。
处理用户输入v-on
<div id="app-5">
<p>{{ message }}</p>
<button v-on:click="reverseMessage">反转消息</button>
<input type="text" v-model="text">
<button @click="sendtext">打印</button>
</div>
var app5 = new Vue({
el: '#app-5',
data: {
message: 'Hello Vue.js!',
text: 123
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('');
},
sendtext: function () {
console.log(this.text)
}
},
});
- 为了让用户和你的应用进行交互，我们可以用 v-on 指令添加一个事件监听器，
通过它调用在 Vue 实例中定义的方法 - 注意在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——
所有的 DOM 操作都由 Vue 来处理，你编写的代码只需要关注逻辑层面即可。
这是vue厉害的地方，不需要操作dom，就关心逻辑就可以了，
双向绑定 v-model
<div id="app-6">
<p>{{ message }}</p>
<input v-model="message">
</div>
var app6 = new Vue({
el: '#app-6',
data: {
message: 'Hello Vue!'
}
})
- v-model 指令，它能轻松实现表单输入和应用状态之间的双向绑定。
- 是可以修改的，修改了输入框里面的，然后上面显示的内容是跟随变化的，
指令列表
- 上面介绍了一些常用的指令，
- 那指令到底有多少？？https://cn.vuejs.org/v2/api/#指令
1，v-text
2，v-html
3，v-show
4，v-if
5，v-else
6，v-else-if
7，v-for
8，v-on
9，v-bind
10，v-model
11，v-slot
12，v-pre
13，v-cloak
14，v-once
注意两个缩写
v-bind 缩写
<!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
v-on 缩写
<!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
注意指令的配合
<div v-if="type === 'A'">
A
</div>
<div v-else-if="type === 'B'">
B
</div>
<div v-else-if="type === 'C'">
C
</div>
<div v-else>
Not A/B/C
</div>
模板语言
- 指令和模板语言要结合使用
文本
<span>Message: {{ msg }}</span>
语法 (双大括号) 的文本插值
通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新
<span v-once>这个将不会改变: {{ msg }}</span>
原始 HTML
双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html 指令：
<p>Using mustaches: {{ rawHtml }}</p>
<p>Using v-html directive: <span v-html="rawHtml"></span></p>