我们在前面的Hello小案例中运用到的就是插值语法。
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="../VueEnvironment/vue.js">script>
head>
<body>
<div id="root">
<h1>Hello.{{name}}h1>
<h3>现在的时间是{{new Date().getDate()}}h3>
<hr/>
div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'CSDN'
}
})
script>
body>
html>
hr标签用来创建一个分割线
显示效果:
现在我们在以上代码的基础之上多了一个需求,我们创建一个超链接:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script type="text/javascript" src="../VueEnvironment/vue.js">script>
head>
<body>
<div id="root">
<h1>Hello.{{name}}h1>
<h3>现在的时间是{{new Date().getDate()}}h3>
<a v-bind:href="url">点击跳转到CSDNa> <br>
<a :href="url">点击跳转到CSDNa>
<hr/>
div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'CSDN',
url:'http://www.csdn.net'
}
})
script>
body>
html>
显示效果:
Vue模板语法有2大类:
在这里我们还可能遇到一个问题,那就是在data里面放数据的时候我们可能会遇到属性名冲突的情况,当然我们可以通过把属性名改成不一样的来解决这个问题,不过我们有一种更好的方式:数据结构分层
例如我们要显示两个省份名:
我们可能这样写代码:
<body>
<div id="root">
<h1>Hello.{{name}}h1>
<h3>现在的时间是{{new Date().getDate()}}h3>
<a v-bind:href="url">点击跳转到{{name1}}a> <br>
<a :href="url">点击跳转到{{name2}}a>
<hr/>
div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'CSDN'
name1:'湖北省',
name2:'黑龙江省',
url:'http://www.csdn.net'
}
})
script>
body>
如果我们使用数据分层的方式,我们可以这么写:
<body>
<div id="root">
<h1>Hello.{{name}}h1>
<h3>现在的时间是{{new Date().getDate()}}h3>
<a v-bind:href="url">点击跳转到{{province.name1}}a> <br>
<a :href="url">点击跳转到{{province.name2}}a>
<hr/>
div>
<script>
Vue.config.productionTip=false
new Vue({
el:'#root',
data:{
name:'CSDN',
province:{
name1:'湖北省',
name2:'黑龙江省'
},
url:'http://www.csdn.net'
}
})
script>
body>
Vue有两种数据绑定的方式:
单向绑定(v-bind)
:数据只能从data流向页面。双向绑定(v-model)
:数据不仅能从data流向页面,还可以从页面流向data。备注:
例子:
<body>
<div id="root">
单向数据绑定:<input type="text" :value="name"><br/>
双向数据绑定:<input type="text" v-model="name"><br/>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
new Vue({
el:'#root',
data:{
name:'CSDN'
}
})
script>
body>
显示效果:
我们可以从Vue的开发者工具看到创建出来的Vue对象(注意不是容器标签)
首先我们可以来看一下我们创建的Vue对象:
在这些属性中以"$"开头的都是可以直接被我们程序员给使用的。除了图中的这些之外,我们还可以从它的原型对象上看到一些带’‘$’'的属性:
其中我们可以看到一个$mount(),我们可以借助于这个方法来实现el,也就是用它来绑定容器。
mount有挂载的意思,,我们可以据此来更好地理解它的作用。
使用这种方法的好处是灵活度更高,比如我们可以让它延迟一秒绑定:
<body>
<div id="root">
<h1>Hello.{{name}}h1>
<h3>现在的时间是{{new Date().getDate()}}h3>
<a v-bind:href="url">点击跳转到{{province.name1}}a> <br>
<a :href="url">点击跳转到{{province.name2}}a>
<hr/>
div>
<script>
Vue.config.productionTip=false
const v =new Vue({
// el:'#root',
data:{
name:'CSDN',
province:{
name1:'湖北省',
name2:'黑龙江省'
},
url:'http://www.csdn.net'
}
})
setTimeout(() => {
v.$mount('#root')
}, 1000);
script>
body>
也就是说,刚开始是这样:
1s后变成了这样:
data也有另外一种写法,也就是把data写成一个函数,函数的返回值必须是一个对象,里面装着你想要的数据。
例如:
<body>
<div id="root">
<h1>你好,{{name}}h1>
div>
body>
<script type="text/javascript">
Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法:对象式
/* data:{
name:'CSDN'
} */
//data的第二种写法:函数式
data(){
console.log(this) //此处的this是Vue实例对象
return{
name:'CSDN'
}
}
})
script>
data与el的2种写法:
el有2种写法
(1)new Vue时候配置el属性。
(2).先创建Vue实例,随后再通过vm.$mount(‘#root’)指定el的值。
data有2种写法
(1).对象式
(2).函数式
如何选择:目前哪种写法都可以,以后涉及到组件时,data必须使用函数式,否则会报错。
一个重要的原则:由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了(成了window)。