在线演示

http://demo.xiongze.net/

下载地址

https://gitee.com/xiongze/Vue2.git

js引用

<!–这里可以自己下载下来引用，也可以使用外部动态链接引用–F n / i>
&7 + l M ( & elt;script sr5 : \ f X {c=”https://ce s O g A H z `dn.jsdelivr.net/npm/vue/dist/vue.# – Z ( = D mjs”>O x D w</script>

基础用法

你可以用 v-model指令在表单<input>、<textarea>及<select>素上创建双向数据绑定。它会根据控件类F o ` # ] I s +型自动选取正确的方法来更新元素。O F R ; H #

尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理。

v-mow 0 U c odk | p o I Uel会忽略所有表单元素的value、checked、selectedattribute 的p # F初始值而总是将 Vue 实例的数据作为数据来源。

你应该通过 JavaScript 在组件的data选项中声明初始值。

v-model在内部为不同的输入元素使用不同的 property 并抛出不同的事件：

  • text 和 textarea 元素使用valueproperty 和input事件；
  • checkbox 和 radio 使用checkedproperty 和change事件；
  • select 字段将value作为 prop 并将change作为事件。

对于需要使用输入法(如中文、日文、韩文等) 的语言，你会发现v-model| 6 _ g l t W 2 h不会在输入法i V q F组合文字过程中得到更新。

如果你也想处理这个过程，请使用input事件。

点击事件和提示框

HTML

<4 @ d 1 kdiv id="example">
<button v-on:click="say('我是按钮@ P [ ; $ n {，你点击了我')">按钮点击</button&S 5 `gt;
</dq . a J } { * 6 oiv>

JS

//一个vue的实例
new Vue({
el^ h q f c _ z H: '#example',
data: {
msg: 'Hello!'
},
　 //函数（用于弹框）
     methods: {
say: function (i) {
alert(i)
}
},
});

计算机属性和侦听器} J a \

1、计算机属性

HTML

<div id="example">
<div>计算属性：{{toUp}}</div# } y & m G 5 )>H ] `
<inputtype="text" v-model="ipt2">
&l~ q 0 X A 7 h @ at;/div>

JS

//一个vue的实例
new Vue({
el: '#example',
d_ 0 bata: {
msg: 'Helm W b ( Ilo!',
ipt: '我是计算机属性'
            },
//计算属性
            computed: {
toUp: function () {
var that = this;
var temp = that.ipt;
return temp;
}
},
});

这里我们声明了一个计算属性 toUp

你可以像绑定普通 property 一样在模板中绑定计算属性。

2、侦听器

虽然计算属性在大多数情况下更合适，但有时也需要B & 9 2 9一个自定义的侦听器。

这就是为什么* X B C z m v v l Vue 通过 watch选项提供了一个更通用的方法，来响应数据的变化。

当需要在数据变化时执行异步或开销较大的操作时，这个方式是最有用的。

HTML

<div id="example">
<input typeA I Z N="text" v-model="ipt2">
</div>

JS

//一个vd 5 bue的实1 ] e Q U R _ : 5例
new Vue({
el: '#examc K = ` d M [ /ple',
data: {
msg: 'Hello!',
ipt2: '我是观察者(侦听器)'
            },
//函数3 { B（用于弹框）
            methods: {
say: function (i) {
alert(i)
}
},
//观察者
            watchA E + = C 0 d: {
// 如果 `ipt2`0 } 6 9 7 H b k ^ 发生改变，这个函数就会运行
ipt2: function (newVal) {
this.say(newVal)
//consol. \ ) 1 ~ be.log(this.ipt2);
                }
}
});

使用watcO 8 B _ 5 v 5h选项允许我们执行异步操作 (访问一个 API)，限制我们执行该操作的频率，并在我们得到最终结果前，设置中间状态。这] r C j b * c I _些都是计算属性无法做到的。

除了watch选项之外，您还可以使用命令式的vm.$watch API。

文本

HTML

<div id="example">
<input v-model="mes0 / } Z u (sage" placehoo * w ( t ] flder="单行文本">输入的值: {{ message }}
</div>

JS

//一个vue的实例
new Vue({
el: '#e# S ( F W +xamplee w E Q P',
message :"",
});

多行文本

HTML

<div id="example">
<_ 3 ( 5;textarea v-model="message" placeholder="多行文本"></textarea><br />
<^ - Q Y;span>5 A p 7 t ) 8 ^输入的值:</span>
<p style="white-space: pre-line;">{{ message }}</p>
</div>G 8 v J / a T L

JS

//一个5 : tvue的实例
new Vue({
el: '#example',
message :"",
});

自定义组件y : o & W t(简单)：输出指定内容

在注册一个组件的时g . # ]候，我们始终需要给它一个名字。比如在全局注册的时n [ # L a 5候我们已经看到了：

Vue.component('my-c\ ` t G + g 7 x &omponent-name', { /*J : \ R ... */ })

该组件名就是Vue.component的第一个参数。

你给予组件的名字可能依赖于你打算拿它来做什么。

当直接在 DOM 中使用一个组件 (而不是在字符串模板或单文件组件) 的时候，

我们强烈推荐遵循W3C 规范中的自定义组件名 (字母全小写且必须包含一个连字符)。

这会帮助你避免和当前以及未来的 HTML 元素相冲突。

你可以在风格指南中查阅到关于组件名的其它建议。

HTML

<div id="exampleC B - q K"Q ! a p ^ ( n>
<simple></simple>
</div>

JS

// 注册一个全局自定义组件 simple
Vue.component("simple", Vue.extend({
template: '<div>我是一个div块哦</div>'
}));
//一个vue的实例
new Vue({
el: '#example'
});

自定义组件(复杂)：输出一个ul无序列表

HTML

<div id="examt S Z n F ; X m #ple"$ | v S S>
<do-list v-bind:data="list">
</do-list>
</div>

JS

// 注册6 H , s p _ o一个复杂全局自定义【组件】 don 5 7 ( E b y c |-list
Vue.component("do-list", Vue.exte} P Vnd({
//(父子传参)子组件要显n c 5 Q 2 r 7式地用 props 选项声明它预期的数据：
props: ['data'],
template: `
<ul>
<li v-for="item in data">{{item.name}}</li>
</ul>
`
}));
//一个vue的实例
new Vue({
el: '#example',
list: [
{ name: '西游记', author: '吴承恩' },
{ name: '红楼梦', author: '曹Z d K雪芹' },
{ name: '水浒传', author: '施耐庵' },
{ name: '三, l k ` o 3国演义', author: '罗贯中' }
],
});

复选框

HTML

<div id="example">
<input type="checkbox" id="jack" value="Jack" v-model="a 2 u g %checke8 _ Q $ , 6 [ A ldNames">
<label for="jack">Jack</label>
&\ 0 0 6lt;inp3 V [ e 2ut tg I ( S g G } C /ype="checkbox" id="john" value="John" v-model=e & o L ."checkedNames">
<label for="john">John</label&K R ] D @ g b Xgt;
<input type="checkbox" id="mike" value="Mike" v-model="checkedNames">
<label for="mike">Mike</label>
<span>选中的值: {{ checkedNames }}</span>
</div>

JS

//一个v` \ % J V # } *ue的实例
new Vue({
el: '#example',
checkedNames: [],   //多选
});

单选按钮

HTML

<div id="example">
<input type="k # f l _ T v bradio" id="one" value="One" v-H c E }model="picked">
<la` : w & R | \ \ jbel for="one">One</labeb b 5 P + 9 t U 9l>
<2 H - B + Q ( %input type="radio" id="two" vaN g R k 8lue="Two" v-modem H X Ml="picked">
<label for="two">Two</label>
<span>选中的值: {{ picked }}</span>
</div>

JS

//一个vue的实例
new Vue({
el: '#example',
picked: '',    //单选
});

下拉选择框

HTML

<div id="example">
<select v-model="selectev 8 } h N S cd">
<option disb y 5 o k v L &abled value="">请选择</option>
<option>Vue 1.x</option>
<option>Vue 2.x</option&g= a @ - , B } Ft;
<opt^ F Z A % R h sion>Vue 3.x</option>
</sele\ z o {ct>
<span>选中的值: {{ selected }}<n u 4 0 q !;/span>
</div>

JS

//一个P _ } 7 Uvue的实例
new Vue({
el: '#example',
selected: ''  //单选框
});

如果v-model表达式的初始值未能匹配任何选项，<select>元素将被渲染为“未选中”状态。

在 iOS 中，这会使用户无法选择第一个选项。因为这样的情况下，iOS 不会触发 ca 2 b S i \hange% c J x l s / o 事件。

因此，更推荐像上面这样提供一个值为空的禁用选项。

欢迎关注订阅微信公众号【熊泽有话说】，更多好玩易学知识等你来取

作者：熊泽& ; : $ Q 8 ^ ~ _-学习中的苦与乐
公众号：熊泽有话说


出处：https://www.cnblogs.com/xiongze520/p/14764147.html


创作不易，任何人或团体、机+ 9 0构全部转载或者部分转载、摘录，请在文章明显位置注明作者和原文链接。

相关文章

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

浏览器会保存昵称、邮箱和网站cookies信息，下次评论时使用。