<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<my-footer></my-footer>
<my-footer></my-footer>
<my-footer></my-footer>
{{ message }}
</div>
<hr/>
<div id="app2">
<span>声明周期</span>
</div>
<hr/>
<div id="app3">
<ol>
<hello v-for="item in arr" v-bind:todo="item"></hello>
</ol>
</div>
<hr/>
<div id="app4">
{{ text }}
{{ 6 + 6 }}
<!-- 把属性值渲染到标签内部 -->
<p v-text="text"></p>
<!-- 把属性值为标签字符串解析成标签,并渲染 -->
<div v-html="html"></div>
</div>
<hr/>
<div id="app5">
{{ message }}
<button v-on:click="reverseMessage">反转效果</button>
</div>
<hr/>
<div id="app6">
{{ text }}
<input type="text" name="" id="" v-model="text">
</div>
<hr/>
<div id="app7">
{{ 2 + 2 }}
<br/>
Tom, what do you want eat for dinner? {{ eat ? 'Pize' : 'Chiken' }}
</div>
<hr/>
<div id="app8">
<p v-if="isShow">See you tomorrow</p>
<button v-on:click="isShow = !isShow">Goodbye</button>
</div>
<hr/>
<script src="vue2.js"></script>
<script>
/**
* v-if
* 判断指令
* 一般用于对DOM的增删
* */
new Vue({
el: '#app8',
data: {
isShow: true
}
});
/**
* vue的表达式
* 支持运算符的操作
* 支持三目运算符
* 不支持语句和控制流
* */
new Vue({
el: '#app7',
data: {
eat: false
}
});
/**
* v-model
* 数据的双向绑定
* */
new Vue({
el: '#app6',
data: {
text: 'I am Tom'
}
});
/**
* 事件绑定
* v-on 绑定事件监听器
* */
new Vue({
el: '#app5',
data: {
message: 'hello world'
},
methods: {
reverseMessage: function () {
this.message = this.message.split('').reverse().join('')
}
}
});
/**
* 模板渲染
* data 可以通过模板渲染,使用{{}}渲染
* */
new Vue({
el: '#app4',
data: {
text: '你好啊',
html: '<h5>HTML的h5</h5>'
}
});
/**
* 组件的注册,分为全局注册和局部注册
* 组件中的属性data必须使用函数,避免被引用赋值
* */
// 全局注册
Vue.component('hello', {
props: ['todo'],
template: '<li>My name is {{ name }}, I like {{ todo.text }}</li>',
data: function () {
return {
name: 'Tom'
};
}
});
// 局部注册
var MyFooterChild = {
template: '<h4>我是底部的h1里面的h4</h4>'
}
var MyFooter = {
template: '<h1>我是底部的h1</h1>',
// 组件的底部的嵌套
components: {
'my-footer-child': MyFooterChild
}
}
/**
* v-for
* 循环遍历data中提供的数组,渲染DOM
* 一般用于制作列表
* */
new Vue({
el: '#app3',
data: {
arr: [
{text: '电影'},
{text: '游泳'},
{text: '玩游戏'}
]
}
});
/**
* 声明周期
* */
var app2 = new Vue({
el: '#app2',
created: function () {
console.log('已创建');
},
mounted: function () {
console.log('已挂载');
}
});
/**
* 基本结构
* */
var app = new Vue({
el: '#app',
data: {
message: 'hello world'
},
// template: '<h1>我是h1</h1>',
components: {
'my-footer': MyFooter
}
});
</script>
</body>
</html>
vue快速入门知识点(一)
最新推荐文章于 2021-11-22 15:24:07 发布