Vue支持双向绑定，非常不错。将视图层和模型层分离开。是基于MVVM模型，模型-视图-视图模型。支持ES6。

一、在官网下载vue.js文件

二、声明Vue对象

三、Vue修饰符

1. v-once。使{{}}内的值不能被修改

2.v-pre 。{{}}将不会被Vue替换，直接会显示{{字段}}的文本

3.v-html = "字段名" 和 v-text = "字段名"

四、函数

一、在官网下载vue.js文件

点击前往官网下载安装 — Vue.js

下滑找到上图处，点击“开发版本”下载之后就会得到vue.js，将该文件放置在自己项目中。在创建index.html导入vue.js。

二、声明Vue对象

格式:

var app = new Vue( json对象);

如:

var app = new Vue({

el: "#id", //html中需要双向绑定的id名称 element的缩写

data:{

message:"zhangsan", //字段名: 值

}

})

这里注意一下语法格式，传入的是js对象。每个key : value 之间需要用 , 来连接，不然会报错的。

代码示例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="../js/vue.js"></script></head><body><div id="app"></div><script>const app = new Vue({el:"#app",  //#iddata:{message:"zhangsan",age:10}});</script></body>
</html>

Mustache 插值语法 {{字段名}}

在双向绑定下的id标签下的子标签都可以通过{{ 字段名 }}来访问Vue对象的值。在页面上使用会自动替换为字段名的值的文本。

例如:在{{}}内可以进行字符串拼接，但变量名会在data内寻找是否存在，如果不存在不会自动同步vue中的值。

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><div >{{message+age}}</div><div >{{message}}-{{age}}</div></div><script>const app = new Vue({el:"#app",  //#iddata:{message:"zhangsan",age:10}});</script></body>
</html>

页面效果:

我们可以通过控制台修改字段的值从而会动态的修改页面的值!!!

通过需要调用Vue内的某个字段，可以用vue字段名.$data.字段名来访问或者修改。因为每一个字段都放在data对象内，之所以要加上$，是为了防止污染命名。

当我们从控制台修改message字段的值,页面也会自动更新。

控制台输入:

页面显示:

三、Vue修饰符

1. v-once。使{{}}内的值不能被修改

按照上述代码，我们进行稍作修改。

         <div v-once>{{message+age}}</div><div >{{message}}-{{age}}</div>

示例: 我们通过控制台修改message的值。

2.v-pre 。{{}}将不会被Vue替换，直接会显示{{字段}}的文本

按照上述代码，我们进行稍作修改。

         <div v-pre>{{message+age}}</div><div >{{message}}-{{age}}</div>

效果展示:

3.v-html = "字段名" 和 v-text = "字段名"

v-html = '"字段名"将字段名对应的值替换成html解析。v-text = '"字段名"将字段名对应的值替换成文本解析。

代码示例:

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><script src="js/vue.js"></script></head><body><div id="app"><div >{{thtml}}</div><div v-text="thtml">1</div><div v-html="thtml">2</div></div><script>const app = new Vue({el:"#app",  //#iddata:{message:"zhangsan",age:10,thtml:"<span style='color:red'>哇哦</span>"}});</script></body>
</html>

页面效果：

四、函数

Vue将函数放置在data对象同级的methods中。函数之间都是用逗号相隔。可以用通过{{}}方式调用，如: {{函数名() }}

定义方式:

1.函数名: function(){

}

2.函数名(){

}

代码示例:

 <body><div id="app"><div >{{getMessage()}}</div><div >{{getAge()}}</div></div><script>const app = new Vue({el:"#app",  //#iddata:{message:"zhangsan",age:100},methods:{getMessage:function(){return this.message;},getAge:function(){return this.age;}}});</script></body>

页面效果:

Vue.js的下载和调用相关推荐

vue js 和原生app调用回调方法问题
vue js 和原生app调用回调方法问题 import Vue from 'vue' export default { name: 'list', components: { }, data: () ...
Vue.js devtools官网最新下载中文,绿色版Vue.js devtools下载谷歌插件
Chrome和Firefox DevTools扩展,用于调试Vue.js应用程序. Chrome devtools扩展程序,用于调试Vue.js应用程序. 点击下载访问密码:206902
Vue.js如何在一个页面调用另一个同级页面的方法
实际开发过程中,当前组件调用完方法之后,也许会调取同一级组件中的方法,本人暂时想到两种办法: 1. vm.$on(event,callback) 新建一个工具函数util.js,代码如下: impor ...
用CORS 解决vue.js django跨域调用
Cross-Origin Resource Sharing(CORS)跨域资源共享是一份浏览器技术的规范,提供了 Web 服务从不同域传来沙盒脚本的方法,以避开浏览器的同源策略,是 JSONP 模式的 ...
vue.js devtools下载（亲测可用）
网上太多用不了的版本了,这个可以用https://gitee.com/yingmingzhang/vue-devtools.git
vue.js基础知识篇(4):过滤器、class与style的绑定2
代码下载:网盘欢迎私信第一章:过滤器过滤器是对数据进行处理并返回结果的函数. 1.语法语法是使用管道符"|"进行连接.过滤器可以接收参数,跟在过滤器后面,带引号的参数被当做 ...
vue.js的学习中的简单案例
今天学习了近年来挺火的一门JS技术,叫vue.js下面是它的一个简单案例: <html> <head> <title>$Title$</title> / ...
Vue.js is detected on this page. Devtools inspection is not available becaus...的解决方法
Vue.js is detected on this page. Devtools inspection is not available becaus-[的详细解决方法] 问题描述: 在已经下载Vu ...
html中如何引入vue,vue.js怎样引入到HTML中,vue引入第三方js库
vue.js怎样引入到HTML中如何将vue.js引入HTML,把vue.js引入HTML的方法:一.下载vue . js:然后在HTML中添加vue.js包,其语法为"script src ...

Vue.js的下载和调用

一、在官网下载vue.js文件

二、声明Vue对象

三、Vue修饰符

1. v-once。使{{}}内的值不能被修改

2.v-pre 。{{}}将不会被Vue替换，直接会显示{{字段}}的文本

3.v-html = "字段名" 和 v-text = "字段名"

四、函数

Vue.js的下载和调用相关推荐

最新文章

热门文章

Vue.js的下载和调用

一、在官网下载vue.js文件

二、声明Vue对象

三、Vue修饰符

1. v-once。 使{{}}内的值不能被修改

2.v-pre 。{{}}将不会被Vue替换，直接会显示{{字段}}的文本

3.v-html = "字段名" 和 v-text = "字段名"

四、函数

Vue.js的下载和调用相关推荐

最新文章

热门文章

1. v-once。使{{}}内的值不能被修改