vue基础基础之基基础

目录

 

1，引用

2，实例化

3，数据定义和使用

4，函数的定义和使用

5，数据的改变方式

6，原生js如何输出Vue中的data数据

7,vue中系统属性的使用

---

1，引用

<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>

 

2，实例化

每个vue应用都需要通过实例化vue来实现

语法：

var myvue = new Vue({
    选项
})

 

3，数据定义和使用

注意：若id重复，则以第一个为准

<script type="text/javascript">
	var myvue = new Vue({
		el:'#app',
		data:{
			site:"vue实例"
		}
	})
</script>

也可以在外边定义：

<div id="app">
	<p>{{ site }}</p>
</div>

<script type="text/javascript">
	var shuju = {site:"vue的实例"}
	var myvue = new Vue({
		el:'#app',
		data:shuju
	})
</script>

4，函数的定义和使用

注意：调用函数时，小括号得写上

<div id="app">
	<p>{{ site }}</p>
	<p>{{ test() }}</p>
</div>
<script type="text/javascript">
	var myvue = new Vue({
		el:'#app',
		data:{
			site:"vue实例",
			url:"www.zhaoheng.com"
		},
		methods:{
			test:function(){
				return "你好," + this.url
			}
		}
	})
</script>

5，数据的改变方式

myvue.site = "改变了"

如果数据定义在外边，则也可以：

shuju.site = "改变了"

6，原生js如何输出Vue中的data数据

document.getElementById("test").innerHTML = myvue.site

7,vue中系统属性的使用

除了数据属性，vue实例还提供了一些有用的实例属性与方法，他们都以$为前缀，以便于用户定义的属性区分开

document.write(myvue.$data+"<br/>")
document.write(myvue.$el)

[object Object]
[object HTMLDivElement]