vue基础学习

一.概念

vue是一套用于构建用户界面的渐进式框架,可以自底向上逐层应用。

二.声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统：
①文本插值
渲染结果为 Hello Vue

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

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

②绑定元素 v-bind：

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

var app2 = new Vue({
    el:'#app-2',
    data:{
        message:'页面加载于 ' + new Date().toLocaleString()
    }
});

三.条件与循环

③控制切换一个元素是否显示 v-if

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

var app3 = new Vue({
  el: '#app-3',
  data: {
    seen: true
  }
});

继续在控制台输入 app3.seen = false，之前显示的消息就会消失。

④绑定数组的数据来渲染一个项目列表 v-for
渲染结果为
1.学习 JavaScript
2.学习 Vue
3.整个牛项目

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

var app4 = new Vue({
  el: '#app-4',
  data: {
    todos: [
      { text: '学习 JavaScript' },
      { text: '学习 Vue' },
      { text: '整个牛项目' }
    ]
  }
})

在控制台里，输入 app4.todos.push({ text: '新项目' })，列表最后就会添加一个’新项目’。

四.处理用户输入

⑤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('')
    }
  }
})

效果如下图：

点击反转消息：

注：在 reverseMessage 方法中，我们更新了应用的状态，但没有触碰 DOM——所有的 DOM 操作都由 Vue 来处理

⑥实现表单输入和应用状态之间的双向绑定 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!'
  }
})

⑧执行一次性地插值，
当数据改变时，插值处的内容不会更新 v-once
⑨输出真正的 HTML v-html

五.计算属性

1.计算属性

<div id="demo">{{ fullName }}</div>

普通版本：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})

计算属性版本：

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

六.组件

1.定义Vue组件
组件是为了拆分Vue实例的代码量的，能够让我们以不同的组件，来划分不同的功能。
2.方式
①

<div id="app">
  <mylogin></mylogin>
</div>

<script>
  //定义组件的时候，如果要定义全局的组件，Vue.component('组件的名称',模板对象)
  //通过 对象 字面量的形式，定义了一个组件模板对象
  var login = {
      template:'<h1>1234</h1>'
  }
  //通过Vue.component把组件模板对象，注册为一个全局的Vue组件，
  同时为这个组件起了一个名称，可以让我们通过标签形式，
  在页面中直接引入这个组件
  Vue.component('mylogin',login)
 </script>

②

//创建Vue实例
var vm = new Vue({
   el:'#app',
    data:{},
    methods:{},
    components:{
        //'组件的名称'：组件的模板对象
        'mylogin':login
    }
})

3.父子间传值