Vue(1)

什么是Vue.js?

  • Vue.js是目前最火的前端框架,而React.js是当下最流行的前端框架,我们可以使用React.js进行网站开发和手机App开发,而Vue借助Weex也能实现手机App开发。而Vue.js相较于React.js来说更易入门。
  • 三大前端主流框架之一(Angular.js | React.js | Vue.js)
  • Vue.js主要是用于构建用户界面的框架,所以只关注视图层

学习框架的好处

能显著地提高开发效率。

  • 发展历程:
    原生js(兼容性问题麻烦) --> Jquery之类的js库(极大程度解决兼容性问题,并提供了方便使用的新方法) --> 前端模板引擎(封装一些常用的模板以供调用,但渲染效率低) --> Vue.js等前端框架(减少不必要的DOM操作,从而将精力放在业务逻辑上;提高渲染效率;一些新概念新思想)。

MVC和MVCC的关系

  • MVC一般是后端的一种开发思想,MVC分别代表Model(模型)、View(视图)和Controller(控制),用户通过前端交互可以对数据库进行操作,这个过程可以看做:在View层进行交互 --> 在Controller层处理业务逻辑 --> 在Model层对数据库进行CRUD。
  • MVVM前端页面的一种开发思想,和MVC类似,我们只是把C换成了VM。一般来说,MVVM分层开发思想是将每个页面分成了M、V、VM三个层,VM是M层和V层的调度者,也是MVVM思想的核心层。
    M层一般保存着每个页面中单独的数据
    V层即HTML代码结构
    VM层是两者之间的调度者,实现了M层向V层存取数据和V层向M层存取数据,即实现了数据的双向绑定

使用Vue.js输出hello

Vue.js的安装十分简单,我们只需要引入外部js文件即可。我们直接看代码:




  
Hello Vue
  


  

这是我要说的:{{msg}}

这是最基本的Vue.js的使用,Vue.js为我们提供了Vue这个对象,我们可以进行实例化,而参数el为elemnt的缩写,表示Vue实例绑定的页面元素,而data中我们可以存放一些我们需要使用的数据。
结合MVVM架构,我们可以发现Vue对象的实例vm即VM层,实现了数据的双向绑定,V层即id为app的

,M层即vm中的data对象,存储着页面需要使用到的数据。

v-指令

  • v-cloak:无表达式,直接挂载。cloak有斗篷、隐藏的意思,作用是在也页面编译完成之前让元素保持display:none的属性。需要在css中加:
[v-cloak] {
    display: none;
}

这样,页面就不会因为先加载后编译出现的闪烁效果。

  • v-text:表达式:v-text = "str"。这个指令改变了元素的textContent,下面两条语句的效果是一样的:
 //等价于下面的语句
{{message}}
  • v-html:表达式:v-html = "str"。类似jquery的html(str)。
//假设message = "

Hello

";
//div中显示:

Hello

//div中显示:Hello,和Hello被

标签包裹。

  • v-bind:为元素绑定属性并赋值。
    • 缩写形式:
//可以使用message变量+表达式的形式赋值给属性title。
  • v-on:为元素绑定一个或多个事件。
    • 缩写:@
    • 预期:function || inline statement || Object
    • 参数:event
    • 修饰符:
      Vue(1)_第1张图片
    • 示例:



    
    Test
    


    







练习:跑马灯效果




    
    Test
    


    
{{message}}

v-model实现表单元素的双向数据绑定

目前Vue.js只有v-model才是真正地数据双向绑定,即在页面修改数据同样能动态改变数据的值。
比如:



    
    Test
    


    
{{message1}}
{{message2}}

v-bind:value和v-model的区别在于,v-model能通过表单数据的改变来更新绑定的数据值,实现双向绑定。

练习:使用双向绑定的特点来实现简单的计算器




    
    Test
    


    

使用v-bind设置元素class和style

一般使用数组或对象来绑定,直接看实例即可:

  • class



    
    Test
    
    


    

规则,就是用来打破的(无style)

规则,就是用来打破的

规则,就是用来打破的

规则,就是用来打破的

规则,就是用来打破的

规则,就是用来打破的

规则,就是用来打破的

  • style



    
    Test
    


    

Jinx的含义就是Jinx.

Jinx的含义就是Jinx.

Jinx的含义就是Jinx.

Jinx的含义就是Jinx.

使用v-for进行迭代

使用v-for可迭代数组、数组对象、对象以及数字。




    
    Test
    


    

索引:{{index}};值:{{val}}


索引:{{index}};值:{{val.id}}={{val.name}}


索引:{{index}};键:{{key}};值:{{val}}


{{val}}

使用v-for时key的注意事项
在组件中使用v-for时必须使用key属性,以标识迭代元素的唯一性。注意:key使用v-bind进行绑定,且值必须为字符串或数字。

v-if和v-show的使用

两者的值都是布尔值,根据传入的boolean来决定是否“显示”该元素。
v-ifv-show的区别在于,如果传入的值为true,前者才创建该元素否则不创建;而后者使用“display:none”来控制元素的显示效果,所以一定会创建出来。
所以,

  • v-if:切换显示效果的渲染成本高。
  • v-show:首次创建元素的渲染成本高。
    即,v-if通过删除或新建元素来显示元素;而v-show先创建元素再通过display:none来控制显示效果。根据实际情况选择使用。

案例

........

你可能感兴趣的