这里写目录标题
Vue.js学习·从入门到项目实践(一)
本篇文章是关于Vue.js的第一次学习,主要讲解下Vue.js的使用安装和常用的内置指令。
Vue.js安装
vue.js官网
官网为我们提供了三种安装方式,但是在开发学习之初我们使用第一种直接直接用 script 引入的方式。
将vue.js放入项目js目录,并在页面中引入即可。
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
下面我们创建一个Vue实例,Hello Vue!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>First</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="demo">
{
{message}}
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#demo',
data:{
message: 'Hello Vue!'
}
})
</script>
</body>
</html>
Vue.js内置指令
V-bind
绑定属性,动态更新HTML元素上的属性
DOM节点的属性基本都可以用指令v-bind进行绑定:
V-bind:href
V-bind:class
V-bind:title
属性也可以绑定变量、表达式、执行函数等内容,不过最终的结果都应该满足属性自身的约束。
练习
利用Vue.js设置一个超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-bindLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<a v-bind:href="url">点击</a>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
url: 'https://www.baidu.com'
}
})
</script>
</body>
</html>
V-model
v-model和v-show是Vue核心功能中内置的、开发者不可自定义的指令。我们可以使用v-model为可输入元素(input&textarea)创建双向数据绑定,它会根据元素类型自动选取正确的方法来更新元素。
数据双向绑定,用于表单输入。
Vue允许开发者将v-model用于自定义组件。
在自定义组件中,value属性和input事件尤为重要,它们分别负责不同方向的数据传递。value属性用于接收外部传入的值以更新组件内部的状态;input事件由开发者决定在什么时候调用,并负责将组件内部的状态同步到外部。
练习
利用Vue.js,在输入框输入文字,并在下面显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-modelLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<input v-model="message" placeholder="edit">
<p>Message is:{
{message}}</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message: 'it聚慕课'
}
})
</script>
</body>
</html>
V-for
练习
利用Vue.js,将数组或者json数据在页面中显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-forLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<ol>
<li v-for="value in json">
{
{value}}
</li>
</ol>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
arr: ['苹果', '梨子', '橘子', '芒果'],
json:{
a:'丽丽',b:'小明',c:'小红'}
}
})
</script>
</body>
</html>
V-on
Vue使用v-on指令监听DOM事件,开发者可以将事件代码通过v-on指令绑定到DOM节点上
Vue也为v-on提供了一种简写形式@,代码如下:
<button @click=“logInfo()”>打印消息(default: Hello World)
实际上,写法的不同只是为了避免混淆和冲突,事件绑定的主要作用在于降低了学习和开发的成本,总结了以下两点:
解决了不同浏览器的兼容问题。
提供了语法糖——事件绑定修饰符。
练习
创建两个按钮,其中一个利用原生js,一个利用Vue.js,并触发点击弹窗事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-onLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<input type="button" value="点击1" onclick="alert(1)" />
<input type="button" value="点击2" v-on:click="show()" />
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
},
methods:{
show:function () {
//方法命名方式
alert(1);
}
}
})
</script>
</body>
</html>
V-html
练习
利用Vue.js,向页面嵌入HTML标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-htmlLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-html="msg"></div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'<h1>欢迎光临</h1>'
}
});
</script>
</body>
</html>
V-text
练习
利用Vue.js中的函数向页面嵌入年月日文本数据
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-textLearn</title>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app" v-text="'今年是'+year+'年'+month+'月'"></div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
year:new Date().getFullYear(),
month:new Date().getMonth()+1
}
});
</script>
</body>
</html>
V-cloak
可以使用 v-cloak 指令设置样式,这些样式会在 Vue 实例编译结束时,从绑定的 HTML 元素上被移除。
当网络较慢,网页还在加载 Vue.js ,而导致 Vue 来不及渲染,这时页面就会显示出 Vue 源代码。我们可以使用 v-cloak 指令来解决这一问题。
练习
利用Vue.js中的内置指令V-cloak解决网络较慢的缓冲问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-cloakLearn</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<span>
{
{message}}
</span>
<span v-cloak>{
{message}}</span>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
message:'Hello Vue'
}
});
</script>
</body>
</html>
V-once
v-once在日常开发中用的很多
只渲染元素和组件一次,随后的渲染,使用了此指令的元素/组件及其所有的子节点,都会当作静态内容并跳过,这可以用于优化更新性能。
下面示例:
当修改input框的值时,使用了v-once指令的p元素不会随之改变,而第二个p元素时可以随之改变的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-onceLearn</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<p v-once>{
{msg}}</p> <!--msg不会改变-->
<p>{
{msg}}</p>
<p>
<input type="text" v-model="msg" name="">
</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
msg:'hello'
}
});
</script>
</body>
</html>
V-show
v-show指令,等于true的时候显示,false的时候隐藏
示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>v-showLearn</title>
<style type="text/css">
[v-cloak]{
display: none;
}
</style>
<script src="../js/vue.js" type="text/javascript" charset="UTF-8"></script>
</head>
<body>
<div id="app">
<p v-show="type==='科技'">哈哈哈哈</p>
</div>
<script type="text/javascript">
var vm = new Vue({
el:'#app',
data:{
type:'科技'
}
});
</script>
</body>
</html>