vue页面定义和使用js方法
接触vue是做手机端app,对数据进行页面渲染
vue属于JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。
之前用jQuery操作DOM,需要手动操作DOM,而vue是数据驱动,无需手动操作DOM。它通过一些特殊的html语法,将DOM和数据库绑定起来。一旦创建绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应的更新。(在使用vue时,也可以结合其他库一起使用,比如jQuery)
(本文简单介绍了Vue.js的MVVM模型和它的双向绑定机制,然后以一个Hello World示例,了解了几个比较常用的指令)
MVVM模式(Model-View-ViewModel)
ViewModel是Vue.js的核心,他是一个vue实例。vue实例是作用于某个html元素上的,这个元素可以是HTML的body元素,也可以是指定了id的某个元素。当创建了ViewModel后,双向绑定是如何达成的呢?
DOM Listeners和Data Bindings看做两个工具,他们是实现双向绑定的关键。
从view侧看,ViewModel中的DOM Listeners工具会帮我们监测页面上DOM元素的变化,如果有变化,则更改Model中的数据
从Model侧看,当我们更新Model中的数据时,Data Bindings工具会帮我们更新页面中的DM元素
浅谈vue.js导入css库(elementUi)的方法
.安装以下模块,让webpack可以解析css文件cnpm install style-loader --save-devcnpm install css-loader --save-devcnpm install file-loader --save-dev1231232.安装elementUi模块cnpm install element-ui@next -S113.在webpack.base.conf.js中添加配置{test: /\\\\\\\\.css$/,loader: "style!css"},{test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,loader: "file"}12345678123456784.然后在 main.js 引入并注册import Element from 'element-ui'import 'element-ui/lib/theme-default/index.css'
vuejs中动态增加的html
1、新建html文档,然后在head标签中引入vue的js文件,这里以引入cdn文件为例:
2、在body标签中添加一个id为“app”的div标签,然后在这个div标签中再添加一个div标签,在vue中添加一个变量数据,然后用“{{}}”符号将变量引入到div标签中,并且在标签中添加“v-html="变量"v-html="变量"”属性:
3、用浏览器打开html文档,这时可以在页面中看到被v-html指令添加的html元素: