Vue思想:不像 js 和 jq 一样通过获取节点来操纵元素。
Vue 开发网页,页面渲染由data中的数据生成,改变data中的响应的数据,页面同步改变。页面中数据可以通过 Vue 指令进行操纵。
data属性如何设置响应渲染的数据?
数据: 数组,对象,字符串
methods中设置事件响应的方法;
xx:function(){} 中可以通过 **this **拿到 data 中响应的数据。
data:{
message:"华山论剑",
school:{
name:"张三",
phone:"12345678910"
},
campus:["one","two","three","four"]
}
vue是如何知道要去操作那个元素的呢?
el:"#app"这里有el的属性,在css当中#是id选择器,这样就可以让vue去管理id为app的元素及其内部的后代元素(其实就是将vue实例和容器之间就建立起来了关系,之后vue实例就要将工作成果放在div里面去)。
Vue实例的作用范围:
- Vue会管理el选项命中的元素及其内部的后代元素可以使用其他的选择器,但是建议使用ID选择器(唯一)
- 可以使用其他的双标签,但是不能使用HTML和BODY
第一个Vue程序
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>el挂载点</title>
</head>
<body>
{{message}}
<div id="app" class="app">
{{message}}
<span>{{message}}</span>
</div>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
var app = new Vue({
el:"#app",
//el:".app",
//el:"div",
data:{
message:"华山剑法!"
}
})
</script>
</body>
</html>
初识Vue总结
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法
3.root容器里的代码被称为【Vue模板】
4.Vue实例和容器是一 一对应的
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么模板中用到该数据的地方也会自动更新