初始vue:
初始vue
1.想让vue工作就必须创建一个vue实例,且要传入一个配置对象
2.root容器里的代码依然符合HTML规范,只是混入了vue语法
3.root容器里的代码被称为【vue模板】
4.vue实例和容器是一一对应的
5.真实开发中只有一个vue实例,并且会配合组建一起使用
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新
注意区分:js表达式 和 js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方:
(1).a
(2).a+b
(3).demo(1)
(4).x===y?'a':'b'
2.js代码(语句)
(1).if(){}
(2).for(){}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<!-- <script src="https://unpkg.com/vue@next"></script> -->
<script type="text/javascript" src="js/vue.js"></script>
</head>
<body>
<div id="root">
<h1>hello,{{name}}.{{name}}</h1>
</div>
<div id="root">
<h1>hello,{{name}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //阻止vue在启动时生成提示
new Vue({
el:'#root',//el指定vue实例为那个容器服务
data:{ //data用来存储数据,
name:"张三"
}
})
</script>
</body>
</html>
Vue模板语法:
url.toUpperCase() 大写
v-bind 数据绑定
Vue模板语法有两大类:
1.插值语法:
功能:用于解析标签内容
写法:{{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性
2.指令语法
功能:用于解析标签(包括:标签属性、标签内容、绑定事件......)
举例:v-bind:href="xxx"或 简写为 :href="xxx",xxx同样要写js表达式,
且可以读取到data中的所有属性,
备注:Vue中有很多指令,且形式都是:v-???,此处我们拿v-bind举例。
<body>
<div id="root">
<h1>插值语法</h1>
<h3>您好,{{name}}</h3>
<hr>
<h1>指令语法</h1>
<a v-bind:href="url">点我去尚硅谷学习1</a>
<a :href="school.url">点我去尚硅谷学习2</a>
</div>
<script type="text/javascript">
new Vue({
el:'#root',
data:{
name:'张三',
url:'http://www.atguigu.com',
school:{
url:'http://www.atguigu.com'
}
}
})
</script>
</body>
数据绑定:
vue中有两种数据绑定方式:
1.单向绑定(v-bind):数据只能从data流向页面
2.双向绑定(v-model):数据既可以从data流向页面,也可以从页面流向data
备注:
1.双向绑定一般都用在表单类元素上(如 input、select等)
2.v-model:value可以简写为v-model,因为v-model默认手机的就是value值
<div id='root'>
单项数据绑定:<input type="text" v-bind:value="name"><br>
双向数据绑定:<input type="text" v-model:value="name"><br>
<!--简写-->
单项数据绑定:<input type="text" :value="name"><br>
双向数据绑定:<input type="text" v-model="name"><br>
<!--如下代码是错误的,因为v-model:只能用在表单类元素上-->
<h2 v-model:x="name">你好</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //阻止vue在启动时生成提示
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>
el与data的两种写法:
data与el两种写法:
1.el有两种写法
(1)new vue时配置el属性
(2)先创建vue实例,在通过vm.$mount('#root')指定el值
2.data有两种写法
(1)对象式
(2)函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<!--
data与el两种写法:
1.el有两种写法
(1)new vue时配置el属性
(2)先创建vue实例,在通过vm.$mount('#root')指定el值
2.data有两种写法
(1)对象式
(2)函数式
如何选择:目前哪种写法都可以,以后学习到组件时,data必须使用函数式,否则会报错
3.一个重要的原则:
由Vue管理的函数,一定不要写箭头函数,一旦写了箭头函数,this就不再是Vue实例了。
-->
</head>
<body>
<div id="root">
<h1 >你好,{{name}}</h1>
</div>
<script type="text/javascript">
const v=new Vue({
//el:'#root', 第一种写法
// data:{ //第一种写法
// name:'张三',
// url:'http://www.atguigu.com',
// school:{
// url:'http://www.atguigu.com'
// }
// },
data:function(){ //第二种写法 data () {return{}} 简写
return{
name:'张三',
}
}
})
console.log(v)
setTimeout(function() { //计时器,让他3秒后出来
v.$mount('#root') //第二种写法
}, 3000);
</script>
</body>
</html>
MVVM模型:
MVVM模型
1.M: 模型(Model) : data中的数据
2.V: 视图(view) :模板代码
3.VM: 视图模型(ViewModel): Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="js/vue.js"></script>
<!--
MVVM模型
1.M: 模型(Model) : data中的数据
2.V: 视图(view) :模板代码
3.VM: 视图模型(ViewModel): Vue实例
观察发现:
1.data中所有的属性,最后都出现在了vm身上。
2.vm身上所有的属性 及 Vue原型上所有属性,在Vue模板中都可以直接使用
-->
</head>
<body>
<div id="root">
<h1>学校姓名:{{name}}</h1>
<h1>学校地址:{{address}}</h1>
</div>
<script type="text/javascript">
Vue.config.productionTip=false //阻止vue在启动时生成提示
const vm=new Vue({
data(){
return{
name:'陕西机电',
address:'宝鸡'
}
}
})
vm.$mount('#root')
</script>
</body>
</html>