vueを使用した宣言的レンダリングの紹介
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--el-->
<div id="app">
<!--数据绑定使用-->
{
{ message }} ---- {
{ person.name }}
</div>
//引入了官网的,也可以自己下载到本地引入
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//创建vue对象
var app = new Vue({
el: '#app', //id选择器的方式选择元素
data: { //用于保存数据,在视图中声明了哪些变量
message: 'Hello Vue!',
person: {
age : 17,
name: "张三",
sex: "男"
}
}
})
</script>
</body>
</html>Vueの例
すべてのVueアプリケーションは、Vue 関数を使用して新しいVueインスタンスを 作成することから始まります。
var vm = new Vue({
// 选项
})データと方法
Vueインスタンスが作成さdata れると、オブジェクト内のすべてのプロパティがVueレスポンシブシステムに追加され ます。これらのプロパティの値が変更されると、ビューは「応答」を生成します。つまり、一致が新しい値に更新されます。
<!--el-->
<div >
<!--数据绑定使用-->
{
{ a }} ---- {
{ person.name }}
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
// 我们的数据对象
var data = { a: 1 }
// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
data: data
})
//当这些数据改变时，视图会进行重渲染。
// 值得注意的是只有当实例被创建时就已经存在于 data 中的 property 才是响应式的。
// 也就是说如果你添加一个新的 property，比如： vm.b = 'hi' 它不是响应式的
/**
* 那么对 b 的改动将不会触发任何视图的更新。如果你知道你会在晚些时候需要一个 property，
* 但是一开始它为空或不存在，那么你仅需要设置一些初始值。比如：
* data: {
newTodoText: '',
visitCount: 0,
hideCompletedTodos: false,
todos: [],
error: null
}
*/
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
console.log(newValue,oldValue)
})
vm.a = "222";
</script>ライフサイクル
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
/**
* 每个 Vue 实例在被创建时都要经过一系列的初始化过程
* ——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
* 同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
* @type {Vue}
*/
var vm = new Vue({
data: {msg:"hello"},
beforeCreate: function(){
//在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
console.log('beforeCreate')
},
created: function () {
//在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：
// 数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。
// 然而，挂载阶段还没开始，$el property 目前尚不可用。
// `this` 指向 vm 实例
console.log('created')
},
beforeMount: function () {
/**
* 在挂载开始之前被调用：相关的 render 函数首次被调用。
该钩子在服务器端渲染期间不被调用。
*/
console.log('beforeMount')
},
mounted: function () {
/**
* 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。
* 如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。
注意 mounted 不会保证所有的子组件也都一起被挂载。
如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
*/
console.log('mounted')
},
beforeUpdate: function () {
/**
* 数据更新时调用，发生在虚拟 DOM 打补丁之前。
* 这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
* 该钩子在服务器端渲染期间不被调用，因为只有初次渲染会在服务端进行。
*/
console.log('beforeUpdate')
},
updated: function () {
/**
* 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。
然而在大多数情况下，你应该避免在此期间更改状态。
如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。
该钩子在服务器端渲染期间不被调用
*/
console.log('updated')
},
activated: function () {
/**
* 被 keep-alive 缓存的组件激活时调用。
该钩子在服务器端渲染期间不被调用。
*/
console.log('activated')
},
deactivated: function () {
/**
* 被 keep-alive 缓存的组件停用时调用。
该钩子在服务器端渲染期间不被调用。
*/
console.log('deactivated')
},
beforeDestroy:function () {
/**
* 页面销毁前调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，
* 所有的事件监听器被移除，所有的子实例也都被销毁。
该钩子在服务器端渲染期间不被调用。
*/
console.log('beforeDestroy')
},
destroyed:function(){
/**
* 实例销毁后调用。该钩子被调用后，
* 对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。该钩子在服务器端渲染期间不被调用。
*/
console.log('destroyed')
},
errorCaptured: function (err, vm, info) {
/**
* 2.5.0+ 新增
* 当捕获一个来自子孙组件的错误时被调用。
* 此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。
* 此钩子可以返回 false 以阻止该错误继续向上传播。
*/
console.log(err, vm, info)
}
})
</script>テンプレート構文
補間
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
</head>
<body>
<style>
.red{
color: red;
}
</style>
<!--el-->
<div id="app">
<span>Message: {
{ msg }}</span>
<span v-once>这个将不会改变: {
{ msg }}</span>
<p>{
{vHtml}}</p>
<p v-html="vHtml"></p>
<button v-bind:disabled="isButtonDisabled">Button</button>
<p v-bind:class="color">Button</p>
{
{ number + 1 }}
{
{ ok ? 'YES' : 'NO' }}
{
{ message.split(',').reverse().join('') }}
<div v-bind:id="'list-' + id"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//1.文本
//数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值 <span>Message: {
{ msg }}</span>
//Mustache 标签将会被替代为对应数据对象上 msg property 的值。
// 无论何时，绑定的数据对象上 msg property 发生了改变，插值处的内容都会更新。
//通过使用 v-once 指令，你也能执行一次性地插值，当数据改变时，插值处的内容不会更新。
// 但请留心这会影响到该节点上的其它数据绑定： <span v-once>这个将不会改变: {
{ msg }}</span>
var mv = new Vue({
el:"#app",
data:{
msg:"132131231",
vHtml:"<span style=\"color: red\">This should be red.</span>",
isButtonDisabled:false,
number:10,
ok:false,
message:"12313,31 1",
color:"red"
}
})
mv.msg = "131";
//2.原始 HTML
//双大括号会将数据解释为普通文本，而非 HTML 代码。为了输出真正的 HTML，你需要使用 v-html
//<p>Using mustaches: {
{ rawHtml }}</p>
//<p>Using v-html directive: <span v-html="rawHtml"></span></p>
//3.Attribute
//Mustache 语法不能作用在 HTML attribute 上，遇到这种情况应该使用 v-bind 指令：
//4.用 JavaScript 表达式
//模板中，我们一直都只绑定简单的 property 键值。
// 实际上，对于所有的数据绑定，Vue.js 都提供了完全的 JavaScript 表达式支持。
</script>
</body>
</html>命令
<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<title>模板语法</title>
</head>
<body>
<!--el-->
<div id="app">
<p v-if="seen">现在你看到我了</p>
<!--在这里 href 是参数，告知 v-bind 指令将该元素的 href attribute 与表达式 url 的值绑定。-->
<a v-bind:href="url">百度</a>
<!--v-on 指令，它用于监听 DOM 事件：-->
<a v-on:click="doSomething">点击事件</a>
<!--阻止冒泡-->
<div @click = "click1">
click1
<!--加上。stop点击后就会不执行父级的点击事件-->
<div @click.stop = "click2">
click2
</div>
</div>
<!--
注意，参数表达式的写法存在一些约束，如之后的“对动态参数表达式的约束”章节所述。
-->
<!--这里的 attributeName 会被作为一个 JavaScript 表达式进行动态求值，求得的值将会作为最终的参数来使用。例如，如果你的 Vue 实例有一个 data property attributeName，
其值为 "href"，那么这个绑定将等价于 v-bind:href。-->
<a v-bind:[attributeName]="url"> ... </a>
<form v-on:submit.prevent="onSubmit">...</form>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
//指令
//指令 (Directives) 是带有 v- 前缀的特殊 attribute。
// 指令 attribute 的值预期是单个 JavaScript 表达式 (v-for 是例外情况，稍后我们再讨论)。
// 指令的职责是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
// 例子： <p v-if="seen">现在你看到我了</p>
//1.参数
//一些指令能够接收一个“参数”，在指令名称之后以冒号表示。
// 例如，v-bind 指令可以用于响应式地更新 HTML attribute：
var mv = new Vue({
el:"#app",
data:{
seen:true,
url:"http://www.baidu.com",
attributeName:"href",
},
methods:{
doSomething:function () {
alert("doSomething")
},
click1:function () {
alert("click1")
},
click2:function () {
alert("click2")
}
}
})
//2.动态参数
//从 2.6.0 开始，可以用方括号括起来的 JavaScript 表达式作为一个指令的参数：
//3.修饰符
//修饰符 (modifier) 是以半角句号 . 指明的特殊后缀，用于指出一个指令应该以特殊方式绑定。
// 例如，.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault()：
//4.v-bind 缩写
/**
* <!-- 完整语法 -->
<a v-bind:href="url">...</a>
<!-- 缩写 -->
<a :href="url">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a :[key]="url"> ... </a>
*/
//5.v-on 缩写
/**
* <!-- 完整语法 -->
<a v-on:click="doSomething">...</a>
<!-- 缩写 -->
<a @click="doSomething">...</a>
<!-- 动态参数的缩写 (2.6.0+) -->
<a @[event]="doSomething"> ... </a>
*/
</script>
</body>
</html>