Vue 简明示例。
首先要引入vue.js
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue 使用示例</title>
<script src="vue.min.js"></script>
<style>
.bind_class {color:blue;border:1px solid #ccc;padding:2px 5px}
.red {color:red;border:1px solid red}
.italic {font-style:italic}
.bold {font-weight:bold}
</style>
</head>
<body>
<div id="element_id">
<div>
<h3>变量绑定使用示例</h3>
<ol>
<li>
<h5>显示变量内容，变量值变更后会更新</h5>
<p>变量值：{{var_bind}}</p>
</li>
<li>
<h5>变量值修改后不会更新，指令 v-once</h5>
<p v-once>变量值：{{var_once}}</p>
</li>
<li>
<h5>变量绑定，输出HTML内容，指令 v-html</h5>
<p v-html="var_html">这里将被变量var_html的HTML内容给替换掉。</p>
</li>
<li>
<h5>绑定属性，指令 v-bind:(html属性)</h5>
<span v-bind:class="var_class">绑定class属性</span>
</li>
<li>
<h5>JS计算表达式(不能用“;”结尾)</h5>
<ol>
<li>算数运算：{{ number + 1}}</li>
<li>三元运算：{{ yes ? 'Yes' : 'No'}}</li>
<li>函数调用: {{ var_func.split('').reverse().join('')}}</li>
</ol>
</li>
<li>
<h5>绑定样式</h5>
<ol>
<li v-bind:class="{red:is_red, bold:is_bold}">绑定class</li>
<li v-bind:class="['red', 'italic']">绑定class,数组形式</li>
<li :style="{border:style_border, background: false ? 'gray' : 'lightblue'}">绑定style，:style是<span :style="{color:style_color, fontSize:style_font_size}">v-bind:style</span>的简写</li>
</ol>
</li>
</ol>
</div>
<div>
<h3>条件渲染示例，指令：v-if, v-else-if, v-else</h3>
判断结果：
<span v-if="type == 'A'" style="color:red">条件值：A </span>
<span v-else-if="type == 'B'" style="color:gray">条件值：B </span>
<span v-else-if="type === 'C'" style="color:blue">条件值：C </span>
<span v-else style="color:green">其它值</span>
</div>
<div>
<h3>列表渲染，指令 v-for</h3>
<ol>
<li>
<h5>数组方式</h5>
<ul v-for="item in list_arr">
<li>姓名：{{ item.name }}， 年龄：{{ item.age }}</li>
</ul>
<h5>数组方式（取数组下标号）</h5>
<ul v-for="item, index in list_arr">
<li>{{index}}. 姓名：{{ item.name }}， 年龄：{{ item.age }}</li>
</ul>
</li>
<li>
<h5>对象方式（遍历属性）</h5>
<ul v-for="item in list_obj">
<li>属性值：{{ item }}</li>
</ul>
<h5>对象方式（遍历属性，取属性名）</h5>
<ul v-for="item, attr in list_obj">
<li>{{attr}}：{{ item }}</li>
</ul>
</li>
</ol>
</div>
<div>
<h3>事件绑定，指令 v-on:(HTML事件名 onclick, ondblclick ...) 简写形式如：@click, @dblclick</h3>
<ol>
<li>
<h5>行内JS</h5>
<span v-on:click="click_counter ++">点我看click_counter的值：{{click_counter}}</span>
</li>
<li>
<h5>绑定methods中的函数</h5>
<button v-on:click="click();">点我</button>
</li>
<li>
<h5>绑定methods中的函数并传参数</h5>
<button v-on:click="show('Hello!! How are you.');">点我</button>
</li>
<li>
<h5>绑定methods中的双击函数并传参数</h5>
<button @dblclick="dblclick();">点我</button>
</li>
<li>
<h5>绑定methods中的函数,传参数和事件对象($event)</h5>
<button @click="event('事件对象：', $event);">点我</button>
</li>
</ol>
</div>
<div>
<h5>表单对象,双向绑定，指令 v-model</h5>
<input type="text" v-model="form_input">
<p>input内容：{{form_input}}</p>
<textarea v-model="form_textarea"></textarea>
<p>textarea内容：{{form_textarea}}</p>
<input type="checkbox" v-model="form_checkbox" value="Jack">Jack
<input type="checkbox" v-model="form_checkbox" value="Jhon">Jhon
<input type="checkbox" v-model="form_checkbox" value="Mike">Mike
<p>checkbox内容：{{form_checkbox}}</p>
<input type="radio" v-model="form_radio" value="One">One
<input type="radio" v-model="form_radio" value="Two">Two
<p>form_radio内容：{{form_radio}}</p>
<input type="button" value="点击提交表单" @click="formSubmit">
</div>
<div>
<h3>全局注册的组件</h3>
<component1 id="组件1" text="组件1，绑定了自定义事件" @clicknow="func_clicknow"></component1>
<component1 id="组件2" text="组件2"><span class="red">在组件内插入的内容</span></component1>
<component1 id="组件3" text="组件3"></component1>
<h3>局部注册的组件</h3>
<component2 name="1"></component2>
<component2 name="2"></component2>
</div>
</div>
<script>
// 创建组件，这样定义的组件是全局的,定义必须在实例化Vue对象之前
Vue.component('component1', { // 相当于声明一个组件类
props:['id', 'text'], // 组件标签属性
data: function(){
return {
count:0 // 初始参数，相当于这个类的属性
}
},
template:'<div><p>全局注册组件示例 {{id}}</p><button @click="func_click">{{text}} 点击次数：{{count}}</button><slot>内容插入点</slot></div>', // 多标签组件最外层要有父标签，否则只会解析第一个标签，一般用<div>做为外层标签也可以用别的如：<u><i>
methods: { // 事件，相当于这个类的方法
func_click: function(){
this.count++;
this.$emit('clicknow', this.count); // 为组件添加自定义事件属性，相当于在标签上增加事件绑定。
}
}
});
// 实例化Vue对象
var vueObject = new Vue({
el:'#element_id',
data:{
var_bind:'变量值',
var_once:'改了也不变',
var_html:'<span style="color:red;border:1px solid #CCC">HTML</span>',
var_class:'bind_class',
type:'B',
number:21,
yes:true,
var_func:'vue',
is_red: true,
is_italic: true,
is_bold: true,
style_color:'green',
style_font_size:'25px',
style_border:'1px solid green',
list_arr: [
{ name:'张三', age:20 },
{ name:'李四', age:21 }
],
list_obj:{
name:'张三',
age:23,
province:'上海'
},
click_counter:0,
form_input:'默认值',
form_textarea:'',
form_checkbox:['Jack', 'Mike'],
form_radio:'Two'
},
methods:{
click:function(){
alert('点我了');
},
show:function(message){
alert('参数值：'+message);
},
dblclick:function(){
alert('点了我两下');
},
event:function(message, e){
alert(message + typeof e);
console.log(e);
},
formSubmit: function(){
data = {
input:this.form_input,
textarea:this.form_textarea,
checkbox:this.form_checkbox,
radio:this.form_radio
}
console.log(data);
},
func_clicknow:function(count){
alert('组件自定义事件：' + count);
}
},
components:{ // 局部注册的组件
component2:{
props:['name'],
data : function(){return {}},
template:'<u>这是局部注册的组件 {{name}}<br></u>'
}
}
});
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
