了解vue的作用及基本使用结构
掌握Vue差值的方法:使用vue将数据绑定到标签内容
{{}} v-html v-text
掌握Vue差值的方法:使用vue将数据绑定到标签属性
v-bind:src=”imgSrc”
首先我们得知道,vue是让我们换种方式写js,除了vue特有的语法之外,我们大部分时间还是在写基本的js语句(变量 数据处理 方法)。所以要想学好vue,我们对于基础的js语法必须有一定了解。
必须要掌握的基础知识:html +css +javascript
开始使用vue 如何获得 和 学习vue
官方网站:https://cn.vuejs.org/
获得vue源码
学习vue
vue是目前非常优秀且学习成本最低的js框架,另外vue是一套用于构建用户界面的渐进式框架。(根据项目或者学习需求不同,可以学习不同的阶段)vue核心库只关注视图层,非常容易掌握。
vue
vue-router
vuex
vue-resource
构建工具vue-cli
如同咱们学习jquery,需要$(function(){})一样,vue作为一个框架,也为我们设计了一整套的用法。首先就是基本结构。
vue的基本结构,就是在使用Vue()构造函数,创建一个vue实例(对象),在创建这个实例时,我们传入各种用于显示数据(数据,方法)。
仅仅这么写是不会有效果的,我们的把这些数据或者是方法,写到html中才可以。
vue的数据绑定 I 另一种数据绑定方式
除了常见的{{}}的方式,vue还有另外两种绑定数据的方法
v-html =“name” 可以识别html结构
v-html =“name” 不能识别数据中html结构,全部以文本形式展示
补充:{{}}的方式,插入的数据,默认是不能识别html结构的,因为这会造成危险。一旦用户或者一些有心人,通过向你的数据中写入了html结构,而你又支持解析他们为真正的html,这有可能对你的网站造成根本性的破坏。
vue的属性数据绑定
如果要将数据绑定给元素属性进行使用,一定是要借助vue提供的命令来实现。
大家跟我写一段代码,感受在代码重构(换种方式写代码)的过程中,代码的简化。(以及代码的执行速度上的提升,这个你们只能听我说,看是看不出来的)。
vue的指令系统
vue可以让我们在html中心写入任何我们想写的js代码,但是直接完全按照js的写法写上去,vue就会显得很low(真是如此,我们完全没有必要学习vue了)
是事实,vue设计了一套指令系统,来代替各种js逻辑。我们之前学过的v-***,就是vue指令。
v-bind:class=“name” =======》div.setAttribute(“class”,name)
缩写 :class = “name”
v-html=“name” ========>div.innerHTML = name;
v-text = “name” ========>div.innerText =name;
现在能理解vue换种方式写js的说法了吗,所以说熟练掌握对于学习vue的很重要。大家记住这样一个说法:javascript能力就代表你在前端这个行业的天花板。
接下来,我们要学习vue指令系统,另外几个常用的指令
v-if v-else
首先这是个判断语句
这里是作为判断元素是否加载
除此以外 还有 v-if v-else-if v-else 大家能想到如何使用吗
接下来,我们要学习vue指令系统,另外几个常用的指令
v-show
控制元素显示和隐藏
v-show = “boo” boo:true、、显示
v-show = “boo” boo:false、、、隐藏
思考? v-if v-show 的区别?
v-if判断元素是否加载,减轻服务器压力
v-show是操作元素的display属性
v-model是实现数据双向绑定的
刚开始我们简单分析了下MVVM到底是个什么东西。我们已经知道,vue将model中的数据(或者是数据变化),反应到viewModel上。viewModel再将数据反应到view上(界面)。
v-model的作用就是获得view的数据(或者是数据变化),反映到viewModel上。再由viewModel将界面的数据变化反应到model中。
这就实现了所谓的双向数据绑定。
这个很重要,非常非常重要。
不写一句js做出一个加法运算
v-on 用来绑定函数 =========》div.on+事件类型 = function(){}
v-bind的高级用法
在前边我们已经使用过v-bind元素属性进行绑定
这里要说的是特殊情况,像 class style这些属性都可以有多个值。
这里vue对这两个属性提供了特殊的语法,完成不同场景需要。
以class为例:场景一:这个class动态添加(有或者没有)
vue的指令系统 v-once
作用:数据只会被绑定一次,以后model中的数据改变,也不会引起此处的view的更新
v-clock
作用:在vue渲染完整个DOM后才能显示。防止网速较慢是,用户看到结构中的{{}},这个指令要配合css属性使用