一.初识vue
Vue官网:Vue.js
里面介绍了vue的发展,使用,以及各种注意事项。
1.想让Vue工作,就必须创建一个Vue实例,且要传入一个配置对象;
2.root容器里的代码依然符合html规范,只不过混入了一些特殊的Vue语法;
3.root容器里的代码被称为【Vue模板】;
4.Vue实例和容器是一一对应的;
5.真实开发中只有一个Vue实例,并且会配合着组件一起使用;
6.{{xxx}}中的xxx要写js表达式,且xxx可以自动读取到data中的所有属性;
7.一旦data中的数据发生改变,那么页面中用到该数据的地方也会自动更新;
vue的基本语法:
<!-- 准备好一个容器 -->
<div id="rood">
<h1>你好,{{name}}</h1>
</div>
<script>
Vue.config.productionTip = false;//阻止 vue 在启动时生成生产程序
// 创建Vue实例
new Vue({
el:'#rood',//el用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
data:{//data中用于存储数据,I数据供el所指定的容器去使用,值我们暂时先写成一个对象。
name:'帅哥'
}
})
注意:
区分:js表达式 和 js代码(语句)
1.表达式:一个表达式会产生一个值,可以放在任何一个需要值的地方;
(1). a
(2). a+b
(3). demo(1)
(4). x===y ? 'a':'b'
2.js代码(语句)
(1). if(){}
(2). for(){}
二.vue模板语法
Vue模板语法有2大类:
1.插值语法:
功能: 用于解析标签体内容。
写法: {{xxx}},xxx是js表达式,且可以直接读取到data中的所有属性。
2.指令语法
功能: 用于解析标签(包括:标签属性、标签体内容、绑定事件.....)。
举例: v-bind : href="xxx”或―简写为:href="xxx"",xxx同样要写js表达式,
且可以直接读取到data中的所有属性。
备注: Vue中有很多的指令,且形式都是: v-????,此处我们只是拿v-bind举个例子。
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<hr>
<h1>指令语法</h1>
<!--
简写:
v-bind: ===> :
-->
<a v-bind:href="vido.url.toUpperCase()">去{{vido.name}}看视频1</a>
<a :href="vido.url">去{{vido.name}}看视频2</a>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'张三',
vido:{
name:'小破站',
url:'https://www.bilibili.com/'
}
}
})
</script>
三.数据绑定
Vue中有2种数据绑定的方式:
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>
Vue.config.productionTip = false;
new Vue({
el:'#root',
data:{
name:'张三'
}
})
</script>