Vue.js 练习(一)

1.直接上源代码进行分析:

     

注意点:

(1). 引用支持VUE运行的运行库: src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"

(2). 在 <script></script>标签中定义vue的语法模板,  定义元素、数据和方式等等。

(3). 在 <div></div>标签中,引用vue语法的定义. 把div中的id 标签和vue 中的el标签进行关联。

(4). 在p标签的{{ }}括号中,引用Vue的数据主体。Vue中的message 和div中的message是关联的。

2. 完成用户和vue的简单交互

v-on: 是Vue能够识别的特殊的指令. 它的作用是,告诉Vue请监听某些事件。

注意点:

(1). v-on 是vue的指令,可以监听 changeTitle的更改。

(2). function 是原生javascript 的方法。

通过v-bind 可以绑定非文本属性的标签文件。

3. 什么是指令:

指令基本上就是放在代码中的一些指示。

v-once 这个指令表示数据仅被渲染一次,之后不会被修改。v-once 可以让内容保持在初始值。

Vue 会默认转义html代码,它不会讲其渲染成HTML元素,而是输出为纯文本。

如果要想输出HTML元素,而不是纯文本,该怎么做。可以采用v-html指令。具体格式如下:

把指令放在你想输出HTML代码的地方。这个指令V-html后面跟属性,其实就是html代码。这个指令的作用就是告诉VUE去渲染HTML代码而不是转移它(现在一般都是用v-bind来进行绑定)

猜你喜欢

转载自blog.csdn.net/weixin_40876986/article/details/90512724