js change事件 获取新值和旧值_Web前端Vue.js必备框架
vue是一款渐进式javascript框架，由evan you开发。vue成为前端开发的必备之一。vue的好处轻量级，渐进式框架，响应式更新机制。开发环境，浏览器使用chrome，ide：vs code或者webstorm，node.js8.9+，npm等uni-app直接使用引入vue.js，vue会被注册为一个全局变量，开发环境不要使用压缩版本，一：开发版本有完整的警告和调式模式，二...
vue是一款渐进式javascript框架，由evan you开发。vue成为前端开发的必备之一。
vue的好处轻量级，渐进式框架，响应式更新机制。
开发环境，浏览器使用chrome，ide：vs code或者webstorm，node.js8.9+，npm等
uni-app直接使用引入vue.js，vue会被注册为一个全局变量，开发环境不要使用压缩版本，一：开发版本有完整的警告和调式模式，二：生产版本删除了警告。
<script src="https://cdn.jsdelivr.net/npm/vue">script>生产环境：
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js">script>开发：
<head> <meta charset="utf-8"> <title>title> <link rel="stylesheet" type="text/css" media="screen" href="main.css"> <script src="main.js">script>head><body><div id="app"> {{ message }} <ol> <todo-item v-for="item in arrList" v-bind:todo="item" v-bind:key="item.id">todo-item> ol>div> <script src="https://cdn.jsdelivr.net/vue@2.6.8/dist/vue.js">script><script> Vue.component('todo-item', { props: ['todo'], template: ' {{ todo.text }} ' }) var app = new Vue({ el: '#app', data: { message: 'hello', arrList: [{ id: 0, text: 'da' },{ id: 1, text: 'shu' }] } })script> body>html><body> <div id="app"> {{message}} div> <script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.js">script> <script> var app = new Vue({ el: '#app', data: { message: 'hello', } })script>body>vue CLInpm install -g @vue/clivue create hellocd hellonpm run serve属性：自定义属性，原生属性，特殊属性。
组件中props中声明属性。
vue组件=vue实例=new Vue(options)
组件三大核心
每一个vue组件都是一个vue实例，vue实例通过new vue函数创建的。
事件：普通事件，修饰符事件。
@click @input @change 普通事件@input.trim @click.stop @submit.prevent 修饰符事件<template> <div> name: {{ name || "--" }} <br/> <input :value="name" @change="handleChange"/> <br/> <div @click="handleDivClick"> <buttom @click="handleClick">成功button> <button @click.stop="handleClick">失败button> div> div>template><script>export default { name: "EventDemo", props: { neme: String }, methods: { handleChange(e) { this.$emit("change", e.targer.value); }, handleDivClick() { this.$emit("change", ""); }, handleClick(e) { //e.stopPropagation(); } }};script>插槽：普通插槽和作用域插槽。
<template slot="#">template><template v-slot:#>template><template slot="#" slot-scope="props">template><template v-slot:#="props'><a-tab-pane key="event" tab="事件"> <Event :name="name" @change="handleEventChange"/>a-tab-pane><a-tab-pane key="slot" tab="插槽"> <h2>新语法h2> <$lotDemo> <p>p> <template v-slot:title> <p>titlep> <p>tiltlep> template> <template v-slot:item="props"> <p>item {{ props }} p> template> <$lotDemo> <br/>a-tab-pane><template> <div> <slot/> <slot name="title"/> <slot name="item" v-bind="{ value: 'vue' }"/> div>template><script>export default { name: "SlotDemo"};script>小结：
属性，自定义属性：props，原生属性：attrs，特殊属性：class，style。
事件：普通事件，修饰符事件。插槽：普通插槽，作用域插槽。
双向绑定：
model数据的更新会导致view视图的更新，view视图的更新会导致model数据的更新。但vue是单向数据流，Object.defineProperty响应式更新。
// 语法糖 v-model="phoneInfo" :zip-code.sync="zipCode"/> :phone-info="phoneInfo" @change="val => (phoneInfo = val)" :zip-code="zipCode" @update:zipCode="val => (zipCode=val)"/>状态data和属性props
状态是组件自身的数据，属性来自父组件的数据。状态和属性的改变都未必会触发更新。
好了！下面开讲：
开发环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">script>生产环境版本：
<script src="https://cdn.jsdelivr.net/npm/vue">script>新手不建议用vue-cli哦！
数据渲染：
"app"> {{ message }}
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' }})
"app-2"> "message"> 鼠标悬停几秒钟查看此处动态绑定的提示信息！
var app2 = new Vue({ el: '#app-2', data: { message: '页面加载于 ' + new Date().toLocaleString() }})
"app-3">
if
="seen">现在你看到我了var app3 = new Vue({ el: '#app-3', data: { seen: true }})
"app-4">
for="todo in todos"> {{ todo.text }} var app4 = new Vue({ el: '#app-4', data: { todos: [ { text: '学习 1' }, { text: '学习 2' }, ] }})
"app-5">
{{ message }}
on:click="reverseMessage">逆转消息var app5 = new Vue({ el: '#app-5', data: { message: 'Hello dashucoding!' }, methods: { reverseMessage: function () { this.message = this.message.split('').reverse().join('') } }})
"app-6"> <p>{{ message }}p> "message">div>var app6 = new Vue({ el: '#app-6', data: { message: 'dashucoding!' }})
组件化：
"app-7"> <ol> <todo-item v-for="item in gList" v-bind:todo="item" v-bind:key="item.id" >todo-item> ol>div>Vue.component('todo-item', { props: ['todo'], template: '{{ todo.text }}'})var app7 = new Vue({ el: '#app-7', data: { gList: [ { id: 0, text: '123' }, { id: 1, text: '456' } ] }})创建一个 Vue 实例
var vm = new Vue({ // 选项})
响应
数据
$用于区分与用户定义的属性。
生命周期
v-once执行一次性插值，数据改变后，不会再改变。v-bind:
修饰符：
on:submit.prevent="onSubmit">...v-bind和v-on
<a v-bind:href="url">a><a :href="url">a><a v-on:click="do">a><a @click="do">a>来源：https://cloud.tencent.com/developer/article/1455689
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)