Vue实例的几种写法
输出vue实例,所有红色框里面以$开头的都是都是可以直接使用的,给程序员使用的。其他的不带$的不是给程序员使用的,这些是vue底层自身在使用的。
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
const v = new Vue({
data:{
name: "lucas",
}
})
console.log(v)
setTimeout(() => {
v.$mount("#app")
}, 1000);
</script>
</body>
之前使用el去指定容器,现在使用$mount也能够指定容器。这个就可以回头进行关联,并不需要一开始就关联上。
//el的两种写法
/*const v =new Vue({
//el:'#root',//第一种写法
data:{
name:'xxx’
}
})
console.log(v)
v.$mount('#root')//第二种写法*/
//data的两种写法
new Vue({
el:'#root',
//data的第一种写法:对象式/*
data:{
name:'xxxx'
}*/
//data的第二种写法:函数式
data:function(){
return{
name:'xxx'
})
第一种写法简单粗暴,你需要就直接写一个对象里面配数据。
第二种就是里面写一个函数,这个函数有返回值,返回值是你真正想要的对象。
挂载的写法随意哪种都行,等后面学到组件就必须得使用data麻烦的函数方式写法,而不能使用对象式。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<!--引入vue,这里引入vue那么这里就多了vue构造函数-->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>{{name}}</p>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
new Vue({
data(){
//此处的this是vue实例对象
console.log(this)
return{
name: 'lucas'
}
}
})
console.log(v)
setTimeout(() => {
v.$mount("#app")
}, 1000);
</script>
</body>
</html>
组件的 data 选项是一个函数(data里面是有return的)。Vue 会在创建新组件实例的过程中调用此函数(将里面定义的变量都放到实例里面去,你就可以使用this点出来,包括HTML里面就能够使用这些变量的)。
data与el的2种写法
1.el有2种写法
(1)new Vue时候配置el属性
(2)先创建Vue实例,随后再通过vm.$mount('#root')指定el的值。2.data有2种写法
(1)对象式
(2)函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错。3.一个重要的原则:由vue管理的函数(data其实就是一个),一定不要写箭头函数,一且写了箭头函数,this就不再是Vue实例了。
第一步导入vue,第二步在html里面写一点东西,第三步在js里面写一点东西。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<div id="app">
{{message}}
</div>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message: "hello vue!"
}
})
</script>
</body>
</html>
new Vue()是构造函数,构造vue实例。data是vue实例当中的使用到的数据,你需要使用什么就写什么。
{{message}} 是模板的语法,作用是使用数据和页面结构关联起来。
vue是如何知道要去操作那个元素的呢?el:"#app"这里有el的属性,在css当中#是id选择器,这样就可以让vue去管理id为app的元素。(其实就是将vue实例和容器之间就建立起来了关系,之后vue实例就要将工作成果放在div里面去)
有两种写法,你给选择器让它去找去
const app = new Vue({
el: "#app",
亲自找到这个元素,给其配置到el里面,一般使用上面简洁写法!
const app = new Vue({
el: document.getElementById('root'),
你只负责将数据维护好,用到数据的地方自然而然就变了,这就省去了你自己操作dom。
data和el之间使用逗号分隔,不同的key value。data是一个对象可以存入许多信息。在html里面{{}}是插值语法。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!--准备一个容器-->
<div id="app">
{{ name }}
</div>
<script type="text/javascript">
//创建Vue实例,要想使用vue就必须创建,否则免谈,是一切的开端
//在创建vue的时候,传不传参数,传几个,分别是什么数据类型,只传一个参数,参数类型是对象
//这个对象叫做配置对象,比如axios({url:'http://xxxx'})要发请求也要配置对象,配置对象key是不能够乱修改的
new Vue({ //不需要使用 const app = new Vue.....多此一举
el: "#app", //指定为当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //data用于存储数据,数据供el所指定的容器去使用,容器之外的不管
name: "lucas123456"
}
})
</script>
</body>
</html>
el:挂载点
在创建vue实例的时候传入的对象当中有两个属性,分别是el和data。
el属性就是挂载点,通过css选择器设置vue实例管理的元素,设置完毕之后,el命中的元素内部使用两个大括号修饰的部分就会被data当中同名的数据替换。
在外部的元素是不会被渲染的。el命中元素的内部是被vue所管理,可以被任意的嵌套其他的标签。
默认使用的是id选择器,同时也可以是class选择器。
<body>
<p>{{message}}</p>
<div id="app" class="app">
{{message}}
<span>{{message}}</span>
</div>
<script type="text/javascript">
var app = new Vue({
el:".app",
data:{
message: "hello vue!"
}
})
</script>
</body>
或者是标签选择器都行
el:"div",
实际开发的时候是建议选择id选择器,在开发当中会去约定id选择器唯一,而类选择器和标签选择器都可以命中多个元素会造成语义的不清晰,所以建议使用的是id选择器。
<p id="app" class="app">
{{message}}
<span>{{message}}</span>
</p>
<script type="text/javascript">
var app = new Vue({
el:"#app",
data:{
message: "hello vue!"
}
})
</script>
<h1 id="app" class="app">
{{message}}
<span>{{message}}</span>
</h1>
注意:不要将你的vue挂载到html标签或者body的上面,建议使用div作为挂载点,因为div没有额外的样式,但是向p h1标签都有独立的样式,不建议使用。
总结
1.想让Vue工作,就必须创建十个Vue实例,且要传入一个配置对象
2.div容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.div容器里的代码被称为【Vue模板】(所谓的模板就是混着很多的写法,这个就是vue的模板)
容器两个作用,一个是为vue提供模板,其次就是将vue的工作成果往哪放。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>首页</title>
<link href="" type="text/css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<style type="text/css">
</style>
</head>
<body>
<!--准备一个容器-->
<div id="app">
{{ name }}
</div>
<script type="text/javascript">
//创建Vue实例,要想使用vue就必须创建,否则免谈,是一切的开端
//在创建vue的时候,传不传参数,传几个,分别是什么数据类型,只传一个参数,参数类型是对象
//这个对象叫做配置对象,比如axios({url:'http://xxxx'})要发请求也要配置对象,配置对象key是不能够乱修改的
new Vue({ //不需要使用 const app = new Vue.....多此一举
el: "#app", //指定为当前vue实例为哪个容器服务,值通常为css选择器字符串
data:{ //data用于存储数据,数据供el所指定的容器去使用,容器之外的不管
name: "lucas123456"
}
})
</script>
</body>
</html>
注意
一个vue实例不能同时去接管两个容器。
<body>
<div class="app">
<p>{{ msg }}</p>
</div>
<div class="app">
<p>{{ msg }}</p>
</div>
<script type="text/javascript">
new Vue({
el: ".app",
data:{
msg: "vue"
}
}
)
</script>
</body>
---------------------------
vue
{{ msg }}
vue实例确实只有一个,但是有两个容器,由于上面的vue实例接管了容器,下面部分的vue实例没有任何作用。所以一个容器只能被一个vue实例去接管。
<body>
<div id="app">
<p>{{ msg }} {{ address }}</p>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data:{
msg: "vue"
}
}
)
new Vue({
el: "#app",
data:{
address: "vue"
}
}
)
</script>
</body>
容器和vue实例之间的关系只能是1对1关系。
双花括号里面,包着的代码,必须写成js里面的表达式,注意区分:js表达式和js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
- a
- a+b
- demo(1)
- x=== y?'a':'b’
2.js代码(语句)
- if(){}
- for(){}
<div id="app">
<p>{{ msg }} {{ address.toUpperCase() }} {{ Date.now()}} {{ 1 + 1 }}</p>
</div>
将动态的数据交给了vue实例,以后通过某种办法数据变化了,那么页面上使用到这部分数据的地方就自动更新了,不需要你去操作dom了。它们之间仿佛有隧道连接了,这边一边,另外一边就自动变。
初识Vue:
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一 一对应的
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新