VUE基础(躺着都能会)

一丶vue是什么

其实就是一套渐进式框架,与其他框架不同的是,Vue采用自底向上增量开发的设计.Vue的核心库只关注视图层.Vue完全有能力采用单文件组件和Vue生态系统支持的库开发复杂单页应用.

Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件

官方网址:https://cn.vuejs.org/

二丶Vue安装

0.node.js

1.下载并用 <script> 标签引入，Vue 会被注册为一个全局变量。

　　2.CDN: <script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>

　　注意:把vue.js 换成 vue.min.js。这是一个更小的构建，可以带来比开发环境下更快的速度体验。

　　3.NPM:$ npm install vue

　　国内镜像:https://npm.taobao.org/

三丶Hello World　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个示例</title>
</head>
<body>
<!--导入vue-->
<script src="vue.js">
</script>

<div id="app">
    <!--渲染语法-->
    <p>{{ message }}</p>
</div>

<!--js核心-->
<script>
    new Vue({
    el: "#app",
    data:{
        message: "Hello Vue.js!"
          }
             })
</script>

</body>
</html>

页面显示:Hello Vue.js!

四丶声明式渲染

　　1.插入文本

　　Vue.js的核心就是用模板语法声明式的将数据渲染进DOM系统

<div id="app">
    <!--渲染语法-->
    <p>{{ message }}</p>
</div>

<!--js核心-->
<script>
    new Vue({
    el: "#app",
    data:{
        message: "Hello Vue.js!"
          }
             })
</script>

　　2.绑定属性

　　除了插入文本,我们还可以绑定元素属性

<div id="app-2">
    <span v-bind:title="message">
　　　　　鼠标悬停几秒钟来看此处绑定的提示信息!
    </span>
</div>

<script>
    var app2 = new Vue({
        el:"#app-2",
        data:{
            message:"页面加载于" + new Date().toLocaleDateString()
        }
    })
</script>
v-bind被称为指令,指令带有前缀v-

页面显示

五丶条件与循环

　　1.条件:控制和切换

<div id="app-3">
    <p v-if="seen">现在你看到我了</p>
</div>

<script>
    var app3 = new Vue({
        el:"#app-3",
        data:{
            seen:true
        }
    })
</script>
true结果现在你看到我了
false结果为页面为空

　　2.循环:渲染列表

<div id="app-4">
    <ol>
        <li v-for="todo in todos">
            {{ todo.text }}
        </li>
    </ol>
</div>

<script>
    var app4 = new Vue({
        el: '#app-4',
        data: {
        todos: [
        { text: '学习 JavaScript' },
        { text: '学习 Vue' },
        { text: '整个牛项目' }
                ]
                }        
                        })
</script>
在页面循环出列表

页面显示

六丶处理用户输入

v-on

<div id="app-5">
  <p>{{ message }}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
var app5 = new Vue({
  el: '#app-5',
  data: {
    message: 'Hello Vue.js!'
  },
  methods: {
    reverseMessage: function () {
      this.message = this.message.split('').reverse().join('')
    }
  }
})

v-model

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>
var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

七丶组件化应用构建

在 Vue 里，一个组件本质上是一个拥有预定义选项的一个 Vue 实例

// 定义名为 todo-item 的新组件
Vue.component('todo-item', {
  template: '<li>这是个待办项</li>'
})

现在你可以用它构建另一个组件模板
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>

posted on 2018-06-22 20:27 仓鼠大人爱吃肉阅读(210) 评论(0) 收藏举报