VUE知识点整合1

Vue.js 是什么

观看本节视频讲解

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

尝试 Vue.js 最简单的方法是使用 Hello World 例子。你可以在浏览器新标签页中打开它，跟着例子学习一些基础用法。或者你也可以创建一个 .html 文件，然后通过如下方式引入 Vue：

<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

或者

<!-- 生产环境版本，优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>

 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：

<div id="app">
  {{ message }}
</div>

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

VUE主要包括以下几个模块：

Vue.js安装                         Vue.js目录结构                  Vue.js 起步
Vue.js 模板语法                 Vue.js条件语句                  Vue.js 循环语句
Vue.js 计算属性                 Vue.js监听属性                  Vue.js样式绑定
Vue.js事件处理器               Vue.js表单                         Vue.js组件
Vue.js组件-自定义事件       Vue.js自定义指令              Vue.js 路由
Vue.js过渡&动画                 Vue.js混入                        Vue js Ajax（axios）
Vue.js Ajax（vue-resource）                                      Vue.js响应接口

条件判断

v-if

条件判断使用 v-if 指令：

<div id="app">
    <p v-if="seen">巴适滴很</p>
    <template v-if="ok">
      <h1>我爱学习</h1>
      <p>今天不努力，明天做废物</p>
      <p>风浪越大，鱼越贵</p>
    </template>
</div>

v-else

可以用 v-else 指令给 v-if 添加一个 "else" 块：

<div id="app">
    <div v-if="Math.random() > 0.5">
      ok
    </div>
    <div v-else>
      no way!
    </div>
</div>

Vue.js 循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法， sites 是源数据数组并且 site 是数组元素迭代的别名。

v-for 可以绑定数据到数组来渲染一个列表

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据

v-for 迭代整数

    <div id="app">
        <!-- 输出变量的值 -->
        <!-- <p>{{msg}}</p> -->
        <!-- <p> {{ age }} </p>
        <p> {{ age + 200 }} </p>
        <-- 字符串需要引号 -->
        <!-- <p> {{ age >= 18 ? '成年' : '未成年' }} </p> -->
        <!-- 纯文本,遇标签不会解析 -->
        <!-- <div v-text="msg">原来的</div> -->
        <!-- 遇标签会解析 -->
        <!-- <div v-html="msg">原来的</div> -->
        <!-- 插值语法遇到标签也不会解析,纯文本,不会覆盖原本 -->
        <!-- <div>
            原本的{{ msg }},后面
        </div> -->
        <!-- 获得输入的内容 -->
        <input type="text" v-model="msg">
    <button @click = "msg = 'hao' "></button>
    <select v-model="animal">
        <option value="dog">狗</option>
        <option value="duck">鸭</option>
        <option value="pig">猪</option>

    </select>
     <input type="checkboc" v-model ="cku">
    </div>
    <!-- 导入vue.js -->
    <script src="./vue.js"></script>
    <script>
        new Vue ({
            el:"#app",
            data:{
                msg:"hhhh嘿嘿嘿"
            }
        })
    </script>

Vue.js 计算属性

计算属性关键词: computed。

计算属性在处理一些复杂逻辑时是很有用的。

可以看下以下反转字符串的例子

Vue.js 样式绑定

Vue.js class

class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时， 专门增强了它。表达式的结果类型除了字符串之外，还可以是对象或数组。

---

class 属性绑定

我们可以为 v-bind:class 设置一个对象，从而动态的切换 class:

实例中将 isActive 设置为 true 显示了一个绿色的 div 块，如果设置为 false 则不显示：

<div v-bind:class="{ 'active': isActive }"></div>

Vue.js 事件处理器

事件监听可以使用 v-on 指令：

<div id="app">
  <button v-on:click="counter += 1">增加 1</button>
  <p>这个按钮被点击了 {{ counter }} 次。</p>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    counter: 0
  }
})
</script>

//【事件】
//Javascript中的事件，可以理解就是在HTML文档或者浏览器中发生的一种交互操作，使得网页具备互动性。
//常见的有加载事件、鼠标事件。

//【事件流】
//由于DOM是一个树结构，如果在父子节点绑定事件时候，当触发子节点的时候，就存在一个顺序问题，这就涉及到了事件流。
//页面触发一个事件时，会按照一定的顺序来响应事件，事件的响应过程为事件流。

//【js的事件流三阶段】
//事件捕捉阶段（capture phrase）：事件开始由顶层对象触发，然后逐级向下传播，直到目标元素；
//处于目标阶段（target phrase）：处于绑定事件的元素上；
//事件冒泡阶段（bubbling phrase）：事件由具体的元素先接收，然后逐级向上传播，直到不具体的元素；
//（事件捕获是从上到下，而事件冒泡，是从下到上。）

Vue.js 表单

这节我们为大家介绍 Vue.js 表单上的应用。

你可以用 v-model 指令在表单控件元素上创建双向数据绑定。