// 声明式渲染 {{smsxl1}}
<!-- 声明式渲染 -->
<div id="smsxl">声明式渲染:{{smsxl1}}</div>
var smsxl = new Vue({
el:"#smsxl",
data:{
smsxl1:"声明式渲染"
}
});
// 还可以像这样来绑定元素 v-bind:title
<!-- 还可以像这样来绑定元素 -->
<div id="tost">
<span v-bind:title="ti"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！</span>
</div>
var vm = new Vue({
el:"#tost",
data:{
ti:new Date().toLocaleString()
}
});
注：v-bind:title="ti" ti为 Vue对象中的 data:{ ti: "aaaa" } 数据。
// 条件与循环 v-if="tr"
<!-- // 条件与循环 -->
<div id="root">
<span v-if="tr">显示了</span>
</div>
let ob = new Vue({
el:"#root",
data:{
tr:true
}
});
注：v-if="tr" tr 为 true; 所以显示，不为true 就不显示。
// === 条件与循环 可以绑定数组的数据来渲染一个项目 v-for="todo in ti
<!-- // 条件与循环 可以绑定数组的数据来渲染一个项目 -->
<div id="root">
<li v-for="todo in ti">
{{todo.text}}
</li>
</div>
let ob = new Vue({
el:"#root",
data:{
ti:[
{text:1111},
{text:2222},
{text:3333}
]
}
});
注： v-for="name in arr或object"
// 处理用户输入 v-on:click="res"
<!-- 处理用户输入 -->
<div id="root">
{{ms}}
<button v-on:click="res">反转</button>
</div>
// 处理用户输入
let ob = new Vue({
el:"#root",
data:{
ms:"dsfasdfasd"
},
methods: {
res:function (){
this.ms = this.ms.split('').reverse().join('');
}
},
});
注：v-on:click="res" 绑定 Vue对象的 methods: { res:function(){} }
// 组件化应用构建
<!-- 组件化应用构建 -->
// 后续组件基础知识后，回头再学习下。
// === Vue 实例
// 创建一个 Vue 实例
let vm = new Vue({});
var vm = new Vue({});
主： vm = new Vue({});
// === 数据与方法
<!-- 数据与方法 -->
<div id="root">
{{data}}
</div>
let data = {a:1};
let vm = new Vue({
el:"#root",
data:{
data:data //等于 let 变量
}
});
data.a = vm.a; //是对的。true;
data.a = 3;
data.a = vm.a; //3
vm.$data = data;
vm.$el = id选择器
vm.$watch(a,function (xc,lc){ //监控新老变量
conslo.log();
});
注：可以这样的获取相关的 Vue对象的数据。
//==========
let vm = new Vue({
el:"#root",
data:{
da:"aaaaaaa"
}
});
console.log(vm.$el);
console.log(vm.$data.da);
===========//
// 实例生命周期钩子 created:function (){}
let vm=new Vue({
el:"",
data:{
},
created:function (){
//生命周期钩子函数
}
});
注：created:function(){
}
// === 插值
// 文本 {{name}}
// v-html="" 可以显示编译过的HTM标签。
// v-once 只显示一次内容
// v-bind:id v-bind:class="pa" 绑定ID 属性 内容等
// v-on:click=fun; v-on="click" 绑定事件
<!-- // 插值 -->
<!-- // 文本 -->
<div id="root">{{text}}</div>
<!-- v-once 内容不会改变。 -->
<div id="root" v-once>
{{htmla}}
</div>
let vm = new Vue({
el:"#root",
data:{
text:"内容"
}
});
// 原始 HTML
let vm = new Vue({
el:"#root",
data:{
htmla:"<div>aaaaaaaaaaaaa</div>",
htmlb:"<div>aaaaaaaaaaaaa</div>"
}
});
// Attribute DOM 绑定 class 写css
<!-- Attribute DOM 绑定 class 写css -->
<div id="root" v-bind:class="color">
{{text1}}
</div>
let vm = new Vue({
el:"#root",
data:{
text1:"dasdfdsa",
text2:"dsafdskljf",
color:"red"
}
});
<style>
.red {
color: red;
}
</style>
// 使用 JavaScript 表达式 Vue.js 都提供了完全的 JavaScript 表达式支持。只能包含单个表达式
{{ number + 1 }} //表达式
{{ ok ? 'YES' : 'NO' }} 三元运算
{{ message.split('').reverse().join('') }} 表达式点语法。
<div v-bind:id="'list-' + id"></div>
// === 指令
<p v-if="seen">现在你看到我了</p>
// 指令 v-if="参数"
let vm = new Vue({
el:"#root",
data:{
text1:"dasdfdsa",
text2:"dsafdskljf",
color:"red",
seen:true
}
});
// 参数
// v-bind:参数或 [JavaScript表达式]
// v-on:click="参数或方法"
<div id="root" v-bind:href="url"></div>
<div id="root" v-on:click="doSomething"></div>
// 动态参数
<div id="root" v-bind:[js表达式]=""></div>
<div id="root" v-on:[eventName]="方法"></div>
//对动态参数的值的约束
//动态参数预期会求出一个字符串，异常情况下值为 null。这个特殊的 null 值可以被显性地用于移除绑定。任何其它非字符串类型的值都将会触发一个警告。
对动态参数表达式的约束
<a v-bind:['foo' + bar]="value"> ... </a>
// 动态参数
<div id="root" v-if="yes">4444
<a v-bind:href="url">11111</a>
<div @click="click1"> //等同于 v-on:click="click1"
<!-- <div @click="click2">12222</div> -->
<div @click.stop="click2">12222</div>
</div>
</div>
// 动态参数
let vm = new Vue({
el:"#root",
data:{
yes:"no",
url:"http://www.baidu.com"
},
methods: {
click1:function(){
console.log("click1");
},
click2:function(){
console.log("click2");
}
},
});
// === 计算属性和侦听器
// 计算属性
let vm=new Vue({
el:"#root",
data:{
data1:"111"
},
computed:function (){
console.log("进行复杂的表达式");
}
});
// === Class 与 Style 绑定
// 用 v-bind 处理它们：只需要通过表达式计算出字符串结果即可。不过，字符串拼接麻烦且易错。
// 绑定 HTML Class
// 对象语法
// <div id="root" v-bind:class="{name:value}"></div>
// 可以多个class 共存
// <div
// class="static"
// v-bind:class="{ active: isActive, 'text-danger': hasError }">
// </div>
// data: {
// isActive: true,
// hasError: false
// }
// 对象语法 v-bind:class="['aa','bb']"
// 数组语法 v-bind:class="['aa','bb']"
// 绑定内联样式 v-bind:style=""
// === 条件渲染
v-if="abc"
v-if-else="abc === 1"
v-if=""
v-else-if=""
v-else=""
v-show="表达式"
// === 列表渲染
<!-- 列表渲染
用 v-for 把一个数组对应为一组元素 -->
<div id="root">
<ul>
<li v-for="item in arr">
<!-- <li v-for="(item,index) in arr"> -->
{{index}} {{item.age}}
</li>
</ul>
</div>
<div id="root1">
<ul>
<li v-for="(value, name, index) in object1">
{{ index }}: {{ name }}: {{ value }}
</li>
</ul>
</div>
<script>
// 列表渲染
// 用 v-for 把一个数组对应为一组元素
let vm = new Vue({
el:"#root2",
data:{
arr:[
{age:"11111"},
{age:"22222"}
],
object1:{
name:"aaaaa",
name:"bbbbb"
}
},
});
</script>
// 维护状态
<div id="root2"></div>
<ul>
<li v-for="(value,name,index) in object1" v-bind:key="object1.id">
{{ index }}: {{ name }}: {{ value }}
</li>
</ul>
</div>
//数组更新检测
vm.items.push({ message: 'Baz' })
push()
pop()
shift()
unshift()
splice()
sort()
reverse()
<!-- 数组更新检测 -->
<div id="root2">
<ul>
<li v-for="(item, index) in arr" >
{{index}} - {{item.age}}
</li>
</ul>
</div>
<script>
// 列表渲染
// 用 v-for 把一个数组对应为一组元素
var vm = new Vue({
el:"#root2",
data:{
arr:[
{age:"11111"},
{age:"22222"}
],
object1:{
name1:"aaaaa",
name2:"bbbbb"
}
},
});
</script>
//替换数组
<div id="root2">
<ul>
<li v-for="(item, index) in arr" >
{{index}} - {{item.age}}
</li>
</ul>
</div>
// 显示过滤/排序后的结果
let vm = new Vue({
el:"#root",
data:{
da:[1,2,3,4,5],
},
computed:{
px:function (){
return this.da.filter(function(sett){
return sett % 2 === 0;
})
}
}
}
);
// 在计算属性不适用的情况下 (例如，在嵌套 v-for 循环中) 你可以使用一个方法：
<ul v-for="set in sets">
<li v-for="n in even(set)">{{ n }}</li>
</ul>
let vm = new Vue({
el:"#root",
data:{
da:[1,2,3,4,5],
},
methods:{
px:function (){
return this.da.filter(function(sett){
return sett % 2 === 0;
})
}
}
}
);
// 在 v-for 里使用值范围
<div>
<span v-for="n in 10">
{{ n }}
</span>
</div>
// 在 <template> 上使用 v-for
<ul>
<template v-for="item in items">
<li>{{ item.msg }}</li>
<li class="divider" role="presentation"></li>
</template>
</ul>
// === 在组件上使用 v-for
//学习组件后，回头再看下。
// === 事件处理
<div id="root">
<button v-on:click="abc += 1">点击</button>
<p>数值变化：{{abc}}</p>
</div>
<script>
let vm = new Vue({
el:"#root",
data:{
abc: 0
}
});
</script>
//事件处理方法
<div id="root">
<button v-on:click="fun('bbb',$event)">点击</button>
</div>
<script>
//事件处理方法
let vm=new Vue({
el:"#root",
data:{
name:"wulei"
},
methods: {
fun:function (str,e){
alert(str);
console.log(e);
}
},
});
</script>
//内联处理器中的方法
<div id="root">
<button v-on:click="fun('aaa')">点击</button>
<button v-on:click="fun('bbb')">点击</button>
</div>
let vm=new Vue({
el:"#root",
data:{
name:"wulei"
},
methods:{
fun:function (str){
alert(str);
}
}
});
//内联语句处理器中访问原始的 DOM 事件
<button v-on:click="warn('Form cannot be submitted yet.', $event)">
Submit
</button>
methods: {
warn: function (message, event) {
// 现在我们可以访问原生事件对象
if (event) {
event.preventDefault()
}
alert(message)
}
}
//事件修饰符
.stop 阻止单击事件继续传播
.prevent 提交事件不再重载页面
.capture 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理
.self 修饰符只有在点击事件绑定的元素与当前被点击元素一致时才触发点击事件。
.once 点击事件将只会触发一次
.passive 滚动事件的默认行为 (即滚动行为) 将会立即触发
<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>
<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>
<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>
<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>
<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>
<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>
// .self 当点击的事件 class mid 的时侯， .mid上有绑定 @click.self 所以才响应
<div id="app">
<div class="outer" @click="getTarget($event)">333
<div class="mid" @click.self="getTarget($event)">2222
<div class="inner" @click="getTarget($event)">111</div>
</div>
</div>
</div>
<script>
const app = new Vue({
el: '#app',
methods: {
getTarget(ev){
console.log('currentTarget: ', ev.currentTarget, 'target: ', ev.target)
},
}
})
</script>
<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成 -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>
// ===按键修饰符
<input v-on:keyup.enter="submit">
.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right
<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">
<input v-on:keyup.page-down="onPageDown">
// 按键码
<input v-on:keyup.13="submit">
//你还可以通过全局 config.keyCodes 对象自定义按键修饰符别名：
// 可以使用 `v-on:keyup.f1`
Vue.config.keyCodes.f1 = 112
// ===系统修饰键
//可以用如下修饰符来实现仅在按下相应按键时才触发鼠标或键盘事件的监听器。
.ctrl
.alt
.shift
.meta
<!-- Alt + C -->
<input v-on:keyup.alt.67="clear">
<!-- Ctrl + Click -->
<div v-on:click.ctrl="doSomething">Do something</div>
//.exact 修饰符
<!-- 即使 Alt 或 Shift 被一同按下时也会触发 -->
<button v-on:click.ctrl="onClick">A</button>
<!-- 有且只有 Ctrl 被按下的时候才触发 -->
<button v-on:click.ctrl.exact="onCtrlClick">A</button>
<!-- 没有任何系统修饰符被按下的时候才触发 -->
<button v-on:click.exact="onClick">A</button>
//鼠标按钮修饰符
.left
.right
.middle
//这些修饰符会限制处理函数仅响应特定的鼠标按钮。
// ===表单输入绑定
//文本
<div id="app">
<form action="">
<input type="text" v-model="da">
内容：{{da}}
</form>
</div>
<script>
let vm=new Vue({
el:"#app",
data:{
da:"aaa"
}
});
</script>
//多行文本
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ message }}</p>
<br>
<textarea v-model="message" placeholder="add multiple lines"></textarea>
//复选框
<input type="checkbox" id="checkbox" v-model="checked">
<label for="checkbox">{{ checked }}</label>
//多复选框
<input type="checkbox" id="jack" value="Jack" v-model="checkedNames">
<label for="jack">Jack</label>
<input type="checkbox" id="john" value="John" v-model="checkedNames">
<label for="john">John</label>
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<br>
<span>Checked names: {{ checkedNames }}</span>
new Vue({
el: '...',
data: {
checkedNames: []
}
})
//单选按钮
<div id="example-4">
<input type="radio" id="one" value="One" v-model="picked">
<label for="one">One</label>
<br>
<input type="radio" id="two" value="Two" v-model="picked">
<label for="two">Two</label>
<br>
<span>Picked: {{ picked }}</span>
</div>
new Vue({
el: '#example-4',
data: {
picked: ''
}
})
//选择框
<div id="example-5">
<select v-model="selected">
<option disabled value="">请选择</option>
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '...',
data: {
selected: ''
}
})
//多选时 (绑定到一个数组)：
<div id="example-6">
<select v-model="selected" multiple style="width: 50px;">
<option>A</option>
<option>B</option>
<option>C</option>
</select>
<br>
<span>Selected: {{ selected }}</span>
</div>
new Vue({
el: '#example-6',
data: {
selected: []
}
})
//用 v-for 渲染的动态选项：
<select v-model="selected">
<option v-for="option in options" v-bind:value="option.value">
{{ option.text }}
</option>
</select>
<span>Selected: {{ selected }}</span>
new Vue({
el: '...',
data: {
selected: 'A',
options: [
{ text: 'One', value: 'A' },
{ text: 'Two', value: 'B' },
{ text: 'Three', value: 'C' }
]
}
})
//值绑定
<!-- 当选中时，`picked` 为字符串 "a" -->
<input type="radio" v-model="picked" value="a">
<!-- `toggle` 为 true 或 false -->
<input type="checkbox" v-model="toggle">
<!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
<select v-model="selected">
<option value="abc">ABC</option>
</select>
//复选框
<input
type="checkbox"
v-model="toggle"
true-value="yes"
false-value="no"
>
// 当选中时
vm.toggle === 'yes'
// 当没有选中时
vm.toggle === 'no'
//单选按钮
<input type="radio" v-model="pick" v-bind:value="a">
// 当选中时
vm.pick === vm.a
//选择框的选项
<select v-model="selected">
<!-- 内联对象字面量 -->
<option v-bind:value="{ number: 123 }">123</option>
</select>
// 当选中时
typeof vm.selected // => 'object'
vm.selected.number // => 123
// ===修饰符
.lazy 添加 lazy 修饰符，从而转为在 change 事件_之后_进行同步
<!-- 在“change”时而非“input”时更新 -->
<input v-model.lazy="msg">
.number 如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
<input v-model.number="age" type="number">
.trim 如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符
<input v-model.trim="msg">
// ===在组件上使用 v-model
后续学习组件后，再回头学习。
// ===组件基础
//基本示例
<div id="root">
<zujian></zujian>
</div>
<script>
//组件
Vue.component('zujian',{
data:function (){
return {
num:0
}
},
template:'<button v-on:click="num++">You clicked me {{ num }} times.</button>'
});
let vu=new Vue({
el:"#root"
});
</script>
//组件的复用
<div id="components-demo">
<button-counter></button-counter>
<button-counter></button-counter>
<button-counter></button-counter>
</div>
//data 必须是一个函数
data: function () {
return {
count: 0
}
}
//组件的组织
//全局注册和局部注册。至此，我们的组件都只是通过 Vue.component 全局注册的：
Vue.component('my-component-name', {
// ... options ...
})
//通过 Props 向子组件传递数据
<div id="root">
<zujian title="111"></zujian>
<zujian title="222"></zujian>
<zujian title="333"></zujian>
<zujian></zujian>
</div>
<script>
//组件
Vue.component('zujian',{
props:['title'],
data:function (){
return {
num:0
}
},
template:'<button v-on:click="num++">{{title}} -- {{num}}</button>'
});
let vm=new Vue({
el:"#root"
});
</script>
//可以使用 v-bind 来动态传递 props
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:title="post.title"
></blog-post>
new Vue({
el: '#blog-post-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue' },
{ id: 2, title: 'Blogging with Vue' },
{ id: 3, title: 'Why Vue is so fun' }
]
}
})
// ===单个根元素
<h3>{{ title }}</h3>
//错误
<h3>{{ title }}</h3>
<div v-html="content"></div>
//正确
<div class="blog-post">
<h3>{{ title }}</h3>
<div v-html="content"></div>
</div>
//单个根元素 内容比较多的情况下 之复杂内容简单化。
<div id="root">
<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
</div>
<script>
Vue.component('blog-post', {
props: ['post'],
template: `
<div class="blog-post">
<h3>{{post.id}} -- {{ post.title }}</h3>
<div v-html="post.content"></div>
</div>
`
})
let vm=new Vue({
el:"#root",
data:{
posts: [
{ id: 1, title: 'My journey with Vue',content:"<b>asdfsdafdsafdsfasdfdsafdsafds</b>" },
{ id: 2, title: 'Blogging with Vue',content:"asdfsdafdsafdsfasdfdsafdsafds" },
{ id: 3, title: 'Why Vue is so fun',content:"asdfsdafdsafdsfasdfdsafdsafds" }
]
}
});
</script>
//监听子组件事件
<div id="blog-posts-events-demo" class="demo">
<div :style="{ fontSize: postFontSize + 'em' }">
<blog-post
v-for="post in posts"
v-bind:key="post.id"
v-bind:post="post"
v-on:enlarge-text="postFontSize += 0.1"
></blog-post>
</div>
</div>
<script>
// 组件
Vue.component('blog-post', {
props: ['post'],
template: '\
<div class="blog-post">\
<h3>{{ post.title }}</h3>\
<button v-on:click="$emit(\'enlarge-text\')">\
Enlarge text\
</button>\
<div v-html="post.content"></div>\
</div>\
'
})
// 实例VUE
new Vue({
el: '#blog-posts-events-demo',
data: {
posts: [
{ id: 1, title: 'My journey with Vue', content: '...content...' },
{ id: 2, title: 'Blogging with Vue', content: '...content...' },
{ id: 3, title: 'Why Vue is so fun', content: '...content...' },
{ id: 4, title: 'Why Vue is so fun', content: '...content...' }
],
postFontSize: 1
}
})
</script>