vue.js_①
前言：
Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。
另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
Vue是基于js的一个框架，在安装好vue之后，可以使用<script>进行引入
创建一个vue实例，每个vue应该都是从一个vue的函数创建的一个vue的实例开始的
1.在vue中的helloworld的模板
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
{{ message }} {{name}}
</div> <script type="text/javascript">
var app = new Vue({ //通过new vue的方式可以获得一个新的vue的应用
//通过{{}}的形式进行声明变量message和name
el: '#app', //el是指的是element,通过id选择器的书写方式#app找到id为app的视图
data: { //data是指的是存储的变量数据位置
message: 'Hello Vue!',
name : "Vue"
}
});
</script> </body>
</html>
2.Todolist的实例
<!-- 触发点击事件之后，并未改变dom，改变的是数据，数据变了，页面也变了，即为更改数据层，vue的底层会自动重新渲染 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todolist</title>
<script src='vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/> <!-- v-model是一个数据的双向绑定,input的值和data中的inputvalue进行了绑定 -->
<button v-on:click="handleBtnClick">submit</button> <!-- v-on是指在button上绑定一个事件 -->
<ul>
<li v-for="item in list">{{item}}</li> <!-- v-for是vue中的循环 --> </ul>
</div> <script>
var app = new Vue({
el:'#app',
data:{
list: ['first','second'],
inputValue: ''
}, methods:{
handleBtnClick: function() {
this.list.push(this.inputValue)//调用push方法往list里放数据
this.inputValue = ''//input框中有着与inputvalue数据的双向绑定
//alert(this.inputValue) //会自动的去找inputValue中的值
}
} })
</script> </body>
</html>
v-model是一个数据的双向绑定,input的值和data中的inputvalue进行了绑定。
v-on是指在button上绑定一个事件
v-for是vue中的循环，实际上还是item在list中循环。 整个逻辑是：1.点击按钮后，按钮会同时响应绑定的事件“handleBtnClick”
2.事件会调用方法methods内的函数
3.向list中执行push方法，把inputvalue中的数据存到list中去，又因input的值和data中的inputvalue进行了绑定，所以输入框中的信息可以存入list中，从而再循环展示出 3.Vue所展示的是mvvm模型，原jQuery使用的是mvp模式 比如，在mvp模式中
视图v中的按钮被点击，触发控制器p处理业务逻辑，p可以调模型层M进行ajax请求
操作的基本为dom
MVVM模型中
model层负责存储数据，view显示数据，vmodel是vue内置的，不需要关注vmodel
M层的数据的变化时候，vm层会自动映射到V层上，
好处：只需要关注m层的开发就好了，不用关注v，和vm；即面向数据的开发，mvp多为dom的操作，jQuery的操作为mvp
4.前端组件化
前端通常需要模块化处理，这样才会提高代码效率
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Todolist</title>
<script src='vue.js'></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue"/>
<button v-on:click="handleBtnClick">submit</button>
<ul>
<!-- <li v-for="item in list">{{item}}</li> -->
<todo-item v-bind:content="item" v-for="item in list">
</todo-item> <!-- v-bind:content="item"向子组件传入一个绑定值 -->
</ul>
</div> <script> //下面是全局组件的使用,通过list决定循环多少个item,把每个list的项内容,通过v-bind的语法借助content变量传给了todo-item子组件,props接收到了content,模板里有content,即会渲染出来
/*
Vue.component("TodoItem",{ //Vue.component为设定一个全局的组件,TodoItem,如果组件名为TodoItem则视图层可以写为<todo-item>
props: ['content'],
template: "<li>{{content}}</li>" //template是设定一个模板,要使用差值表达式的方式写入content, "<li>" + this.content + "</li>"无效写法
})
*/ //下面是局部的组件,相当于把<li>标签中的所有逻辑都封装到这一个组件TodoItem中
var TodoItem = {
props: ['content'],
template: "<li>{{content}}</li>"
} var app = new Vue({
el:'#app',
components: {
TodoItem: TodoItem //这是使用局部组件时候,需要在Vue实例中注册组件名,并且在vue实例中名字也为TodoItem
},
data:{
list: ['first','second'],
inputValue: ''
}, methods:{
handleBtnClick: function() {
this.list.push(this.inputValue)
this.inputValue = '' }
} })
</script> </body>
</html>
id 为app的div元素的内容实际上是最外层vue实例父组件的模板，创建了子组件叫todoitem，在父组件中通过标签形式使用了子组件，通过该例子，能用父组件向子组件传值，通过v-bind 中的content变量把父组件的值传给子组件
组件分为：局部组件和全局组件
全局组件的设立方式直接新建一个组件
Vue.component（"组件名字"）
局部组件的创立和全局组件一样，只是需要在vue实例中对其进行注册
5.组件中的传值
组件中的传值在4中有着父组件给子组件传值的实例
父组件向子组件传值通过V-bind传递；
子组件通过$emit方式，事件触发向上一层出发事件，且父组件在监听该事件
子组件传值的例子
父组件监听该事件
子组件向上触发事件
js中的splice 删除数组中的某一项
vue.js_①的更多相关文章
- Vue.js_构造器及其实例化概念
Vue构造器 1.Vue.js是一个构造函数,编程中称之为构造器 2.每一个new Vue() 都是一个Vue构造函数的实例,这个过程叫做实例化 3.构造函数需要将其实例化后才会启用 var vm = ...
- Vue.js_础学习之DOM操作
demo说明: 1.{{message}} --“Mustache” 语法(双大括号) 2.v-bind:属性名 ...
- Vue.js_判断与循环
一.判断,条件语句 1.一元表达式判断 {{ ok ? 'show' : 'hide' }} 2.if判断 v-if='ok' <ol id="ifGrammar"> ...
- Vue.js_数据绑定
一.文本 data {{data}} <div id="div1">{{message}}</div> <script> var div1 = ...
- 使用Vue CLI 3将基于element-ui二次封装的组件发布到npm
前言:之前在网上找的好多都是基于vue-cli 2.x的,而使用vue-cli 3的文章比较少,Vue CLI 3 中文文档,所以我在自己尝试的时候把几篇文章结合了一下,调出来了我想要的模式,也就是V ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程（三）
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程（二）
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程（一）
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
随机推荐
- python做批量剪切、旋转等小程序
我自己在学习python时自己动手做了几个简单实用的小程序,对大家做图像的增强很有效果,我包括我的同学目前都在用我的小程序来做图像增强,非常的实用.话不多说上代码: import globimport ...
- Multisim 如何调整编辑界面大小
1.option -> sheet properties 2.选择workspace
- sqli-libs（29（jspstudy）-31关）
Less_29 Less-29: 需要用到jspstudy跟phpstudy 搭建jspstudy: sqli-labs-master文件夹下面还有tomcat文件,这才是真正的关卡,里面的jsp ...
- Linux实现树莓派3B的国密SM9算法交叉编译——（二）miracl库的测试与静态库的生成
先参考这篇文章 Linux实现树莓派3B的国密SM9算法交叉编译——(一)环境部署.简单测试与eclipse工程项目测试 部署好环境,并简单测试交叉编译环境是否安装成功,最后实现在Eclipse上进行 ...
- idea中的springboot+gradle项目报错springboot configuration annotation processor not found in classpath
idea中的springboot项目,打开某个类run.halo.app.config.properties.HaloProperties.java,报错(使用gradle编译): springboo ...
- C语言程序的错误和警告
一段C语言代码,在编译.链接和运行的各个阶段都可能会出现问题.编译器只能检查编译和链接阶段出现的问题,而可执行程序已经脱离了编译器,运行阶段出现问题编译器是无能为力的. 如果我们编写的代码正确,运行时 ...
- jmeter实现SMTP邮件协议压测
实现目的 通过jmeter的SMTP取样器,调用SMTP协议,批量进行邮件的发送,已达到压测的目的. 脚本实现 User Defined Variables定义用户变量 编辑SMTP Sampler取 ...
- css颜色+透明度的写法
今天在学习页面的时候,看到视频里用到颜色的十六进制表达式直接设置透明度,但是后来在实践过程中发现是有误的,特此记录一下,也算是学习了一个新知识. RGBA表示式 比如我们设置rgba(0, 0, 0, ...
- re模块、正则表达式
一.正则表达式 1.正则表达式不是Python独有的,它是一门独立的技术,所有的编程语言都可以使用正则表达式,在Python中使用正则表达式就要借助于re模块,或者是支持正则表达式书写的方法. 2.用 ...
- Dirjkstra
Description 给定n个点,m条有向边 求每个点到1号点的最短距离 Input 第一行两个数为n,m,n表示顶点个数,m表示边的条数. (1 ≤ n, m ≤ 100 ) 接下来m行,每一行有 ...