P5hello小案例
初始Vue：
1.想让Vue工作，就必须创建一个Vue实例，且要传入一个配置对象
2，root容器里的代码依然符合html规范，只不过混入一些特殊的Vue语法
3，root容器里的代码被称为【Vue模板】
4,Vue实例和容器是一一对应的
5，真实开发中只有一个Vue实例，并且会配合着组件一起使用
6，{{xxx}}中xxx要写js表达式，且xxx可以自动读到data中所有属性
7，一旦data中数据发生改变，那么模板中用到该数据的地方也会自动更新
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--引入Vue-->
<script type="text/javascript" src="../js/vue.js"></script>
<title>初始Vue</title>
</head>
<body>
<!--准备好一个容器-->
<div id="root">
<h1>Hello,尚硅谷</h1>
<h1>Hello,{{name}}</h1>
</div>
<!--容器外不行-->
<h1>Hello,{{name}}</h1>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生产提示
//创建Vue实例
//这里是Vue开端
//里面装一个对象
const x=new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'尚硅谷'
}
})
</script>
</body>
</html>
P6分析Hello案例
一个实例对应多个容器：
结果：
多个实例对应一个容器:
一 一对应：
万一以后写的太多：（组件）
注意区分：
js表达式 和 js代码（语句）
1.表达式：一个表达式会生成一个值，可以放在任何一个需要值的地方
（1）a
（2）a+b
（3）demo(1)
（4）x==y?‘a’:‘b’
2.js代码（语句）
（1）if(){}
（2）for(){}
<h1>Hello,{{Date.now()}}</h1>
P7模板语法
<div class="root">
<h1>插值语法</h1>
<h1>你好，{{name}}</h1>
<hr/>
<h1>指令语法</h1>
<!--地址写死了，这里url写什么-->
<a href="http://www.baidu.com">百度地址写死了</a>
<a href="url">百度</a>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生产提示
//创建Vue实例
//这里是Vue开端
//里面装一个对象
new Vue({
el:'.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'尚硅谷',
url:'http://www.baidu.com'
}
})
</script>
</body>
指令语法
如何写url
<a href="url">百度</a> //普通标签写了
<a v-bind:href="url">百度</a>//当成js表达式执行
v-bind:
简写成 :
总结：
1.插值语法：
功能：用于解析标签体内容
写法：{{xxx}},xxx是js表达式，且可以直接读取到data中所有属性
2.指令语法：
功能:用于解析标签（包括：标签属性、标签体内容、绑定事件）。
举例：
v-bind:href=“xxx”
或简写成 : href=“xxx”
xxx同样要写js表达式，且可以直接读取到data中的所有属性
多级
<!--准备好一个容器-->
<div class="root">
<h1>插值语法</h1>
<h1>你好，{{name}}</h1>
<hr/>
<h1>指令语法</h1>
<!--地址写死了-->
<a href="http://www.baidu.com">百度地址写死了</a>
<a v-bind:href="url">百度指令语法</a>
<a :href="url">百度简写</a>
<a :href="bili.url">{{bili.name}}</a>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生产提示
//创建Vue实例
//这里是Vue开端
//里面装一个对象
new Vue({
el:'.root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'尚硅谷',
url:'http://www.baidu.com',
bili:{
name:'b站',
url:'https://www.bilibili.com'
}
}
})
</script>
P8数据绑定
单向绑定:v-bind
双向绑定:v-model
<!--准备好一个容器-->
<div id="root">
单向数据绑定：<input type="text" v-bind:value="name">
<br>
双向数据绑定：<input type="text" v-model:value="name">
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue在启动时生产提示
//创建Vue实例
//这里是Vue开端
//里面装一个对象
new Vue({
el:'#root',//el用于指定当前Vue实例为哪个容器服务，值通常为css选择器字符串
data:{//data中用于存储数据，数据供el所指定的容器去使用
name:'尚硅谷'
}
})
</script>
总结
Vue中有两种数据绑定的方式：
1.单向绑定（v-bind）：数据只能从data流向页面
2.双向绑定（v-model）：数据不仅能从data流向页面，还可以从页面流向data
备注：
1.双向绑定一般都应用在表单元素上（如：input，select等）
2.v-model可以简写为v-model，因为v-model默认收集的就是value值
完整：
双向数据绑定：<input type="text" v-model:value="name">
简写：
双向数据绑定：<input type="text" v-model="name">
扫一扫
1106
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
