Vue的基础学习

Vue的学习

1. vue.js是什么

是一套用于构建用户界面的渐进式框架。

被设计为可以自底向上逐层应用。

扩展: 渐进式框架：**Vue不强求你一次性接受并使用它全部的功能特性。**简单来说，对于初学者刚接触vue，对vue的掌握不够，在学习了一些基本功能(声明式渲染)以后就可以引用这些特性代替jQuery。

自底向上：先编写出基础程序段，然后再逐步扩大规模、补充和升级某些功能。

2.安装

三种方式：

第一种：官网上直接下载用

开发版本：包含了完整的警告和调试模式

生产版本：删除了警告，只有 33.30kb

在开发环境下不要使用压缩版本，不然你就失去了所有常见错误相关的警告!

第二种：使用CND方法

//生产环境下 //原生ES Module

第三种：使用NPM方法

$ cnpm install vue //先安装cnpm

3.起步

Vue需要实例化来实现：

<div id="box">{{ }}</div> //用于输出对象属性和函数返回值。
<script>
    语法： new Vue({
     //选项
        el:"#box", //""选择一个元素节点作为挂载目标
        data:{
            //data 用于定义属性，实例中有三个属性分别为：site、url、alexa。
        },
        methods:{
            //methods用于定义函数，可以通过return来返回函数值
        }
    })
</script>

4.模板语法

文本

文本插值：

<div id="box">
	<p>{{msg}}</p>
	<p v-text="msg"></p>
</div>
<script>
new Vue({
  el: '#box',
  data: {
    msg: 'hello world'
  }
})
</script>

HTML

使用v-html的时候字符串中有html标签会解析渲染出来。

<div id="box">
	<p v-html="msg"></p>
</div>
<script>
new Vue({
  el: '#box',
  data: {
    msg: '<h1>hello world</h1>'
  }
})
</script>

表达式

Vue.js 提供了完全的 JavaScript 表达式支持。

<div id="box">
	<p>{{10+10}}</p>
</div>
<script>
new Vue({
  el: '#box'
})
</script>

5.条件语句

v-if、v-else if和v-else

<div id="box">   
    <div v-if="age>10">呵呵</div>
    <div v-if-else="age=10">嘿嘿</div>  //判断条件进行插入，条件不符合时直接跳过不执行
    <div v-else>哈哈</div>
</div>
<script>
    new Vue({
      el: '#box',
      data:{
          age:11
      }
    })
</script>

v-show

<h1 v-show="isShow">Hello!</h1>
<script>
    new Vue({
      el: '#box',
      data:{
          isShow:true //改变布尔值显示或隐藏
      }
    })
</script>
ow="isShow">Hello!</h1>
<script>
    new Vue({
      el: '#box',
      data:{
          isShow:true //改变布尔值显示或隐藏
      }
    })
</script>