一, 实例中的成员
二, 高级指令
三, 组件初识
一, 实例中的成员
# 计算 computed
- <!DOCTYPE html>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>computed</title>
- </head>
- <body>
- <div id="app">
姓 < input type="text" v-model="first_name">
<hr>
名 < input type="text" v-model="last_name">
- <hr>
- <p>{{ first_name + " " + last_name }}</p>
- <p>{{ full_name_fn() }}</p>
- <!-- 一个变量的值依赖于多个变量的值 -->
- <p>{{ full_name }}</p>
- </div>
- </body>
- <script src="js/vue.js"></script>
- <script>
- new vue({
- el: "#app",
- data: {
- first_name: "",
- last_name: "",
- },
- methods: {
- // 声明的是函数, 该函数必须手动调用
- full_name_fn: function () {
- return this.first_name + " " + this.last_name
- }
- },
- computed: {
- // 声明变量 full_name, 该变量的值等于后方函数的返回值
- // 函数中包含的所有 vue 变量值只要有发生变化的系统就会调用该函数
- full_name: function () {
- return this.first_name + " " + this.last_name
- }
- }
- })
- </script>
- </HTML>
# watch 监听
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>computed</title>
- </head>
- <body>
- <div id="app">
姓名 < input type="text" v-model="full_name">
- <hr>
- <p>{{ first_name }}</p>
- <hr>
- <p>{{ last_name }}</p>
- </div>
- </body>
- <script src="js/vue.js"></script>
- <script>
- new Vue({
- el: "#app",
- data: {
- full_name:"",
- first_name:"",
- last_name:"",
- },
- watch:{
- // watch 只是对已有的变量进行值变化的监听, 一旦发现值变化, 系统自动回调监听变量后的函数
- // 后方函数和前方变量只有数据变化的监听绑定关系, 没有值相关的联系
- full_name: function () {
- arr = this.full_name.split(" ");
- this.first_name = arr[0];
- this.last_name = arr[1];
- }
- }
- })
- </script>
- </HTML>
二, 高级指令
# 条件指令渲染
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- computed
- </title>
- <style>
- .wrap{ width: 300px; } .box{ width: 100px; height: 100px; } .red{ background-color:
- red; float: left; } .orange{ background-color: orange; float:right; }
- </style>
- </head>
- <body>
- <div id="app">
- <button @click="rAction">
- red 切换
- </button>
- <button @click="oAction">
- orange 切换
- </button>
- <div class="wrap">
- <!--v-if 值为 false 时, 不会被渲染 -->
- <!-- 了解: key 由 vue 控制的属性 key 值需要唯一标识, 因为 key 的值就是 vue 对该组件对内在中建立缓存的可以
- -->
- <div class="box red" v-if="r_show" :key="key">
- </div>
- <!--v-show 值为 false 时, 以 display:none 被渲染 -->
- <div class="box orange" v-show="o_show">
- </div>
- </div>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- new Vue({
- el: "#app",
- data: {
- r_show: true,
- o_show: true,
- },
- methods: {
- rAction: function() {
- this.r_show = !this.r_show
- },
- oAction: function() {
- this.o_show = !this.o_show
- }
- }
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- computed
- </title>
- <style>
- .box{ height:100px; } .r{background-color: red} .y{background-color: yellow}
- .b{background-color: blue}
- </style>
- </head>
- <body>
- <div id="app">
- <ul>
- <li @click="rfn">
- 红
- </li>
- <li @click="yfn">
- 黄
- </li>
- <li @click="bfn">
- 蓝
- </li>
- </ul>
- <div class="box r" v-if="tag==0">
- </div>
- <div class="box y" v-else-if="tag==1">
- </div>
- <div class="box b" v-else>
- </div>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- new Vue({
- el: "#app",
- data: {
- tag: 0
- },
- methods: {
- rfn: function() {
- this.tag = 0
- },
- yfn: function() {
- this.tag = 1
- },
- bfn: function() {
- this.tag = 2
- },
- }
- })
- </script>
- </HTML>
条件指令案例
# 循环指令渲染
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- computed
- </title>
- </head>
- <body>
- <div id="app">
- <ul>
- <li>
- {{ ls[0] }}
- </li>
- <li>
- {{ ls[1] }}
- </li>
- <li>
- {{ ls[2] }}
- </li>
- <li>
- {{ ls[3] }}
- </li>
- <li>
- {{ ls[4] }}
- </li>
- </ul>
- <ul>
- <li v-for="(ele,index) in ls">
- {{ ele }} {{ index }}
- </li>
- </ul>
- <ul>
- <li v-for="(value,key,index) in dic">
- {{ key }} {{ value }} {{ index }}
- </li>
- </ul>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- new Vue({
- el: "#app",
- data: {
- ls: ['张三', '李四', '王五', '赵六', '钱七'],
- dic: {
- name: 'Richard.wu',
- age: 31,
- gender: 'man'
- }
- },
- })
- </script>
- </HTML>
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- computed
- </title>
- </head>
- <body>
- <div id="app">
- <form action="">
- <input type="text" v-model="msg">
- <button type="button" @click="fn">
- 留言
- </button>
- </form>
- <ul>
- <li v-for="(m,i) in msgs" @click="deleteAction(i)">
- {{ m }}
- </li>
- </ul>
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- new Vue({
- el: "#app",
- data: {
- msg: "",
- msgs: ["初始留言"]
- },
- methods: {
- fn: function() {
- if (this.msg) {
- // this.msgs.push(this.msg)// 在后添加
- this.msgs.unshift(this.msg); // 在前添加
- this.msg = "";
- }
- },
- deleteAction: function(index) {
- console.log(index);
- // 从什么索引开始, 操作多少位, 操作什么
- this.msgs.splice(index, 1)
- }
- }
- })
- </script>
- </HTML>
循环指令渲染案例
三, 组件初识
# 组件初识
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- computed
- </title>
- </head>
- <body>
- <div id="app">
- {{ msg }}
- </div>
- </body>
- <script src="js/vue.js">
- </script>
- <script>
- // 每个组件均有自身的模板 tempalate, 根组件的模板就是挂载点
- new Vue({
- // 根组件一定需要挂载点(否则无法渲染到页面中), 一般情况下, 根组件 template 就取挂载点, 不需要自定义
- el: "#app",
- data: {
- msg: "信息"
- },
- //template 就是组件的 HTML 架构
- // 每个组件模板只能拥有一个根标签
- template: "<div><p > 中午请客, 师妹告诉我今晚不回去还想给我三个耳光, 我当时就拒绝了, 休想坑我第二顿</p></div>"
- })
- </script>
- </HTML>
- # 局部组件
- <body>
- <div id="app">
- <abc></abc>
- <abc></abc>
- <abc></abc>
- </div>
- <hr>
- <div id="main">
- <local-tag></local-tag>
- <local-tag></local-tag>
- </div>
- </body>
- <script src="js/vue.js"></script>
- <script>
- // 局部组件
- var localTag = {
- // 子组件的数据具有作用域, 以达到组件的复用, 每一个复用的组件具有自身独立的一套数据
- data: function () {
- return { // 返回值是一个数据字典(一套数据)
- count: 0
- }
- },
- template: "<div @click='fn'>点击 {{ count }} 次</div>",
- methods: {
- fn: function () {
- this.count += 1;
- }
- }
- }
- // App 根组件
- new Vue({
- el: "#app",
- // 注册
- components: {
- 'abc': localTag
- }
- })
- // main 根组件
- new Vue({
- el: "#main",
- components: {
- // localTag
- 'local-tag': localTag
- }
- })
- </script>
来源: http://www.bubuko.com/infodetail-2957322.html