vue是什么？
官方介绍：
Vue (读音 /vjuː/，类似于view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
自己理解：简单理解就是程序员开发网页的一个基础框架，可以更快更便捷的开发网站页面，因为vue是使用javascript编写的并且只关心视图层，所以它主要是操作DOM元素，比如利用生成vue实例对象去挂载元素，操作元素。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <title>hallo vue</title> </head> <body> <div id="app"> {{ message }} </div> <script> var app = new Vue({ //element挂载元素 el: '#app', data: { message: 'hello vue' } }) </script> </body> </html>在使用vue框架时可以直接引入,以下是开发环境框架引入标签。
<!--开发环境--> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>new Vue（）：创建Vue实例对象
var app = new Vue({})el：挂载标签元素，比如需要操作那个标签，就需要将标签的id值前边添加一个‘#’符号。
data：数据对象，在这里面可以直接写值，必须配和“{{}}”插入表达式使用。
methods：方法，主要是处理事件的业务逻辑
<script> var app5 =new Vue({ el:'#app-5', data:{ messge:'Hello Vue.js!' }, methods:{ //点击事件处理函数，方法名应与v-on指令绑定的事件名一致 handleClick(){ //split方法将字符串转换为数组，reverse方法反转数组，join方法将数组转换为字符串 this.messge =this.messge.split('').reverse().join('') } } }) </script>属性绑定v-bind：为什么要属性绑定？
在没有绑定的时候DOM元素属性的值是静态的，是不会变化的。
使用
v-bind:title="message"后，Vue 会将message解析为 JavaScript 表达式，读取data中message的值并动态设置。<body> <div id="app-2"> <!-- 将message绑定到span的title属性上,注意:属性值中不能使用单引号,必须使用双引号 --> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！attribute（属性绑定） </span> </div> <script> var app2 = new Vue({ //element挂载元素 el: '#app-2', data: { //将message绑定到span的title属性上 message: '页面加载于' + new Date().toLocaleString() } }) </script> </body>双向绑定v-model（表单输入）
普通的 v-bind（:value="data"）只是单向的：数据变化时更新视图，但用户修改输入框时不会反过来更新数据。
v-model 在单向绑定的基础上，内部自动监听了输入事件（例如 input 事件），当用户输入时，执行 data = 新值，从而实现了“反向绑定”。
[ Vue data ] ←——(用户输入事件)—— [ 表单元素 ]
↓ ↑
(变化时) (变化时)
↓ ↑
[ 自动设置 value ] ——————→ [ 界面显示新值 ]
条件渲染v-if/v-else/v-show
列表渲染v-for 官方文档解释的非常详细不在赘述
今日联系内容![]()
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> <title>vue_jichu</title> </head> <body> <div id="app-2"> <!-- 将message绑定到span的title属性上,注意:属性值中不能使用单引号,必须使用双引号 --> <span v-bind:title="message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！attribute（属性绑定） </span> </div> <div id="app-3"> <!-- v-if指令:根据表达式的真假来显示或隐藏元素 --> <p v-if="seen">现在你看到我了</p> </div> <div id="app-4"> <ol> <!-- v-for指令:根据数组或对象的属性来重复渲染元素 --> <li v-for="todo in todos">{{todo.text}}</li> </ol> </div> <div id="app-5"> <!-- v-on指令:绑定事件处理函数 --> <p>{{messge}}</p> <!-- click点击事件 --> <button v-on:click="handleClick">点击我,可以倒着输出</button> </div> <div id="app-6"> <p>{{messge}}</p> <!-- v-model指令:绑定表单元素的值到数据模型 --> <input v-model="messge" > </div> <script> var app2 = new Vue({ //element挂载元素 el: '#app-2', data: { //将message绑定到span的title属性上 message: '页面加载于' + new Date().toLocaleString() } }) var app3 = new Vue({ el: '#app-3', data: { seen: true } }) var app4 = new Vue({ el: '#app-4', data: { //todos数组，每个元素是一个对象，包含text属性，用于渲染到页面上 todos: [ { text: '学习 JavaScript' }, { text: '学习 Vue' }, { text: '整个牛项目' } ] } }) var app5 =new Vue({ el:'#app-5', data:{ messge:'Hello Vue.js!' }, methods:{ //点击事件处理函数，方法名应与v-on指令绑定的事件名一致 handleClick(){ //split方法将字符串转换为数组，reverse方法反转数组，join方法将数组转换为字符串 this.messge =this.messge.split('').reverse().join('') } } }) var app6 =new Vue({ el:'#app-6', data:{ messge:'Hello Vue.js!123' } }) </script> </body> </html>
