2018/5/18 15:03:24当前位置推荐好文程序员浏览文章

引使用vue

  • 能引使用来自 bootcdn的vue资源
  • 也能直接下载下来。
  • <script src="vue.js"></script> 在.html文件中引使用.js即。

1 构建第一个vue程序

  • 先上代码
<!-- 指定元素id --><div id="app">     <h1> {{title}} </h1> <!-- 插值{{}} --></div><script>    // 新建 app 组件    var app = new Vue({        el: #app, //绑定id        data: {            title: 标题, //配置数据        },    });</script>
  • vue 不可以够挂载在 <html><body> 标签上。
  • vue 能找到 class 和 id的元素
  • vue 用 new Vue(传递配置信息对象) 的方式实例化
  • 配置信息中我们接触了2个属性 el: 绑定的元素, data: {传递给元素键值对数据}
  • 在页面调试的时候,我们能用控制台输入代码 app.title="测试" 来体验Vue动态渲染页面 注意这里不是app.data.title

2 操作元素属性

  • 要操作元素属性,必要要在 html代码 中用 v-bind:属性="key" 来绑定属性,比方 <h1 v-bind:class="color"> ... </h1>
  • 而后在 Vue 的 js代码中 编辑key
var app = new Vue({    el: #app,    data: {        // key: value,        color: red,    },});
  • 定义一个 css 样式 .red { color: red; }
  • 这样一来,html代码在浏览器中其实是被解析成 <h1 class="red"> ... </h1>, 即展现红色字体。
  • v-bind: 因为频繁用,因而能简写为 :
  • 假如我又想绑定,同时又想用其余的样式类呢? <h1 v-bind:class="color" :class="text-center"> ... </h1> :class="假如用双引号包单引号再包字符串,则直接解析为字符串"

3 v-model & v-once

  • 先上代码
<div id="app">    <h1> {{ content }} </h1>    <h2 v-once> {{ content }} </h1>    <input type="text" v-model="content"></div><script>    var app = new Vue({        el: #app,        data: {            content: 远走,        },    });</script>
  • 能看到: h1就是普通的显示数据, h2则增加了一个v-once, input则增加了一个v-model
  • 修改 input 的值,会发现 h1 的内容会发生改变, h2 则不会,是由于 h2 的 v-once 告诉Vue,h2的内容,只从data里读一次,并不希望随着数据绑定的修改而修改
  • 修改 input 的值,h1 会随之发生改变的起因就是由于 v-model 绑定了 app.content 。而 h1 没有用 v-once
  • 总结就是 v-model 绑定某个数据,input.value更改,该数据会随之发生变化。假如想只拿初始值,就需要用 v-once

注意元素中的属性,不需要{{}} 。而标签中的内容,需要用{{}}

4 v-text & v-html

  • laravel框架在视图层也用 {{}} 来显示变量,怎样处理?
<div id="app">    <div v-text="content"></div>    <div v-html="content"></div></div><script>    var app = new Vue({        el: #app,        data: {            content: <p>v-text & v-html</p>        },    });</script>

v-text 渲染绑定标签内容为纯文本, v-html 则会解析 html标签

5用 js表达式 在标签属性或者者内容里面进行运算

  • 代码
<div id="app">    <p :class="style+n">test...</p>    <p><small>这是当前的n的值</small> {{n+由于切换颜色的单选框.value是字符串,所以我这里也变成字符串了}} </p>    <input type="radio" v-model="n" value="1"> 红     <input type="radio" v-model="n" value="2"> 蓝</div><script>    var app = new Vue({        el: #app,        data: {            n: 1,        },    });</script>
  • 在内容进行运算 {{ n+1 }}
  • 在属性进行运算 :class="style+n" => 这里的 style 对应 .style(由于单引号包起来的),而 n 对应 app.n => js中, 字符串+数字 = 字符串连接数字。因而对应的样式就是 .style1 和 .style2。
  • 在我们用 单选框 修改n的value的时候,不使用给 input.name 指定值,通过 v-model 绑定的,html会自动识别他们的关系。(不会出现两个都可以选中的情况)
  • 由于 value="字符串" 所以我们在内容再显示 {{ n+1 }} 的时候,就变成了 11 或者者 21 (+当字符串连接运算解决了)

6 computed 计算

  • 代码
<div id="app">    <input type="text" v-model="num1"> +    <input type="text" v-model="num2"> =    <input type="text" v-model="sum"></div><script>    var app = new Vue({        el: #app,        computed: {            sum: function() {                return this.num11 + this.num21;            }        },        data: {            num1: 0,            num2: 0,          },    });</script>
  • 定义计算属性 computed computed: { 虚拟属性: function() { //执行运算的代码 } }
  • 上面提到过,访问 data 里定义的数据应该是直接使用 app.key 而不是 app.data.key ,在组件定义的内部也一样,用 this.key 访问 data 下定义的值
  • v-model="sum" 即绑定了 computed 中的 虚拟属性sum (由于这个sum其实不存在于内存中)
  • js中想要 + 解决为 加法运算, 而 + 两边又是 字符串的时候,给字符串做一次乘法运算。

7 watch 监听某个 data 的变化

  • 先使用 cnpm 装一个 插件 cnpm install axios ,并在页面上引使用 <script src="node_modules/axios/dist/axios.min.js"></script>
  • 代码
<div id="app">    <input type="text" v-model="keyWord">    {{ content }}</div><script>    var app = new Vue({        el: #app,        watch: {            keyWord: function(newWord, oldWord) {                // 将新值作为数据参数 $_GET[word] 请求 7.php                 axios.get(./7.php?word= + newWord).then(function(response) {                    app.content = response.data;                });            }        },        data: {            keyWord: ,            content: ,        },    });</script>
  • 监听的用 watch: { 监听的data: function(第一个参数是旧值, 第二个参数是新值) { //值发生变化后触发函数执行的代码 } }
  • axios.get(url) 方式请求我们创立的 7.php <?php echo 测试 test... . $_GET[word];
  • axios.then() 内部用回调函数解决逻辑,修改我们的 app.content ,这里不可以使用 this.content
  • 最终实现了一个: 监听 app.keyWord 值的变化,发生变化时异步请求(通过 axios 实现)请求后端php程序,而后修改了前端的app.content的值的功可以:(百度搜索,输入关键字,显示能热门搜索列表的功可以),只是我们没有在php程序中去访问和检索数据库罢了。

通常来说502是后端有问题(php) 404是前端有问题(没找到url,地址写错了)

  • 优化: 监听 keyWord 的变化时,,每变化一次,我们都去请求了一次 7.php ,相当耗费资源,所以我们装一个 lodash cnpm install lodash , 在页面引使用它并且用 _.becoune(方法, 等待时间) 来改写监听,以控制肯定时间内的请求次数
keyWord: _.debounce( //第一个参数是调使用的函数, 第二个参数是等待的时间        function(newWord, oldWord) {        // 将新值作为数据参数 $_GET[word] 请求 7.php         axios.get(./7.php?word= + newWord).then(function(response) {            app.content = response.data;        })    },    3000, //等待时间(3s才执行一次函数))
网友评论