下学期想找一份前端的实习,所以要利用假期多学点东西。
课程:尚硅谷Vue技术
范围:1-7节
一边听新裤子,一边写第一篇学习笔记~
一、Vue介绍
1.Vue定义
Vue定义为一套用于构建用户界面的渐进式框架。
那么,渐进式框架是什么意思呢?
它的官方解释是:主张最少。
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式。
不过这个定义很难懂,我找到了一个通俗的解释。
渐进式框架的大概意思就是你可以只用我的一部分,而不是用了我这一点就必须用我的所有部分。
2.Vue特点
1. 遵循 MVVM 模式
2. 编码简洁, 体积小, 运行效率高, 适合移动/PC 端开发
3. 它本身只关注 UI, 也可以引入其它第三方库开
二、Vue初体验
1、Vue.js文件
入门阶段,引用vue文件进行vue开发,还没有用到vue-cli。
vue文件有开发版本和生产版本两种。
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
老师花了挺大的篇幅讲两者的区别。不过我没有记得太仔细,因为我觉得后期是会用脚手架的(偷了个懒)。
我目前大概能写出三个区别。
(1)代码上,开发版本比生产版本多了“/dist/vue.js”。
(2)光看名字,应该就能猜出一个用于开发,一个用于生产。
(3)开发版本要比生产版本内容多。使用开发版本时出现“警告”,控制台会有相对应的提示,而生产版本则不会有任何提示。
2、初识Vue
1、把vue.js文件放入js文件夹中,创建“初识Vue.html”。
2、在head头部中引入vue文件,代码如下:
<script type="text/javascript" src="../js/vue.js"></script>
3、在body中创建div容器,里面放置需要在页面上显示的内容。
<div id="root">
<h1>hello,{{name}}</h1>
</div>
id="root"
4、在script中放置界面的设置。
<script type="text/javascript">
Vue.config.productionTip=false //设置为 false 以阻止 vue 在启动时生成生产提示。
// 创建Vue实例
// const x=new Vue({
new Vue({
el:'#root',
data:{ //data中用于存储数据,数据供el所指定的容器去使用,值我们暂时先写成一个对象
name:'尚硅谷'
}
// el:element,用于指定当前Vue实例为哪个容器服务,值通常为css选择器字符串。
// id:#;.(class):类选择器
})
</script>
Vue.config.productionTip=false //设置为 false 以阻止 vue 在启动时生成生产提示。
new Vue({}) //创建Vue实例
el:"#element" //与body中id号对应,用来指定当前Vue实例为哪个容器服务,值通常为csc选择器字符串
data:{} //用于存储数据
课堂总结:
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'
js表达式是一种特殊的js代码(语句)
2.js代码(语句)
(1)if(){}
(2)for(){}
3、Vue模板语法
html 中包含了一些 JS 语法代码,语法分为两种,分别为:
1. 插值语法(双大括号表达式)
2. 指令(以 v-开头)
3.1 插值语法
1. 功能: 用于解析标签体内容
2. 语法: {{xxx}} ,xxxx 会作为 js 表达式解析
3.2 指令语法
1. 功能: 解析标签属性、解析标签体内容、绑定事件
2. 举例:v-bind:href = 'xxxx' ,xxxx 会作为 js 表达式被解析
3. 说明:Vue 中有很多的指令,此处只是用 v-bind 举个例子
dada内可嵌套数据
new Vue({
el:'#root',
data:{
name:'jack',
school:{
name:'尚硅谷',
url:'http://www.atguigu.com'
}
}
})
此时body中数据引用需要有一点小改动,需在前面加上“school.”。
"v-bind:"可以缩写为":",用于将内容当成表达式执行。冒号后的内容需在data内,否则会报错。
<div id="root">
<h1>插值语法</h1>
<h3>你好,{{name}}</h3>
<!-- 标签体:你好,{{name}}、指令语法、点我去尚硅谷学习1 -->
<hr/>
<h1>指令语法</h1>
<a v-bind:href="school.url.toUpperCase()" x="hello">点我去{{school.name}}学习1</a>
<a :href="school.url" :x="hello">点我去{{school.name}}学习2</a>
<!-- v-bind:(:)将url当成表达式执行 -->
</div>
三、Tips
!(英文)+enter:生成固定结构
ctrl+/:注释
运行:alt+b
保存:ctrl+s
Bing打开控制台快捷键:ctrl+shift+i
四、总结
没想到学习笔记写了一个多小时,但真的很有收获,今天学的内容整个理了一遍,记忆更深刻了。明天出门玩耍~